FIO-10191: Shows an example of standalone components usage

src/app/app.component.spec.ts

@@ -3,10 +3,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+    imports: [AppComponent],
+}).compileComponents();
   }));
   it('should create the app', async(() => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

@@ -1,11 +1,13 @@
 import { Component } from '@angular/core';
 import { FormioAuthService } from '@formio/angular/auth';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    standalone: false
+    imports: [RouterLink, RouterLinkActive, NgIf, RouterOutlet]
 })
 export class AppComponent {
   constructor(public auth: FormioAuthService) {}

src/app/auth/auth.module.ts

@@ -12,12 +12,12 @@ export const authRoutes = FormioAuthRoutes({
 });
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormioModule,
-    FormioAuth,
-    RouterModule.forChild(authRoutes)
-  ],
-  declarations: [AuthComponent, LoginComponent]
+    imports: [
+        CommonModule,
+        FormioModule,
+        FormioAuth,
+        RouterModule.forChild(authRoutes),
+        AuthComponent, LoginComponent
+    ]
 })
 export class AuthModule { }

src/app/auth/auth/auth.component.spec.ts

@@ -8,8 +8,8 @@ describe('AuthComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AuthComponent ]
-    })
+    imports: [AuthComponent]
+})
     .compileComponents();
   }));
 

src/app/auth/auth/auth.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { FormioAuthComponent, FormioAuthService } from '@formio/angular/auth';
+import { NgIf } from '@angular/common';
+import { RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
 @Component({
     selector: 'app-auth',
     templateUrl: './auth.component.html',
     styleUrls: ['./auth.component.scss'],
-    standalone: false
+    imports: [NgIf, RouterLinkActive, RouterLink, RouterOutlet]
 })
 export class AuthComponent extends FormioAuthComponent {
   constructor(public service: FormioAuthService) {

src/app/auth/login/login.component.spec.ts

@@ -8,8 +8,8 @@ describe('LoginComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
-    })
+    imports: [LoginComponent]
+})
     .compileComponents();
   }));
 

src/app/auth/login/login.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { FormioAuthLoginComponent, FormioAuthService } from '@formio/angular/auth';
+import { FormioComponent } from '@formio/angular';
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.scss'],
-    standalone: false
+    imports: [FormioComponent]
 })
 export class LoginComponent extends FormioAuthLoginComponent {
   constructor(public service: FormioAuthService) {

src/app/data/data.component.spec.ts

@@ -8,8 +8,8 @@ describe('DataComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DataComponent ]
-    })
+    imports: [DataComponent]
+})
     .compileComponents();
   }));
 

src/app/data/data.component.ts

@@ -3,12 +3,13 @@ import { FormioAppConfig } from '@formio/angular';
 import { FormioAuthService } from '@formio/angular/auth';
 import SubmissionComponents from './submission/index';
 import { PrismService } from '../Prism.service';
+import { FormioGridComponent } from '@formio/angular/grid';
 @Component({
     selector: 'app-data',
     templateUrl: './data.component.html',
     styleUrls: ['./data.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    standalone: false
+    imports: [FormioGridComponent]
 })
 export class DataComponent implements AfterViewInit {
 

src/app/data/submission/SubmissionGridHeader.component.ts

@@ -1,8 +1,9 @@
 import { Component } from "@angular/core";
 import { SubmissionGridHeaderComponent } from "@formio/angular/grid";
+import { NgFor, NgIf, NgClass } from "@angular/common";
 
 @Component({
     templateUrl: './SubmissionGridHeader.component.html',
-    standalone: false
+    imports: [NgFor, NgIf, NgClass]
 })
 export class CustomSubmissionGridHeaderComponent extends SubmissionGridHeaderComponent {}

src/app/event/event.module.ts

@@ -15,58 +15,58 @@ import {
 } from '@formio/angular/resource';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FormioModule,
-    FormioResource,
-    RouterModule.forChild([
-        {
-            path: '',
-            component: FormioResourceIndexComponent
-        },
-        {
-            path: 'new',
-            component: FormioResourceCreateComponent
-        },
+    imports: [
+        CommonModule,
+        FormioModule,
+        FormioResource,
+        RouterModule.forChild([
+            {
+                path: '',
+                component: FormioResourceIndexComponent
+            },
+            {
+                path: 'new',
+                component: FormioResourceCreateComponent
+            },
+            {
+                path: ':id',
+                component: ResourceComponent,
+                children: [
+                    {
+                        path: '',
+                        redirectTo: 'view',
+                        pathMatch: 'full'
+                    },
+                    {
+                        path: 'view',
+                        component: ViewComponent
+                    },
+                    {
+                        path: 'edit',
+                        component: FormioResourceEditComponent
+                    },
+                    {
+                        path: 'delete',
+                        component: FormioResourceDeleteComponent
+                    },
+                    {
+                        path: 'participant',
+                        loadChildren: () => import('./participant/participant.module').then(x => x.ParticipantModule)
+                    }
+                ]
+            }
+        ]),
+        ResourceComponent, ViewComponent
+    ],
+    providers: [
+        FormioResourceService,
         {
-            path: ':id',
-            component: ResourceComponent,
-            children: [
-                {
-                    path: '',
-                    redirectTo: 'view',
-                    pathMatch: 'full'
-                },
-                {
-                    path: 'view',
-                    component: ViewComponent
-                },
-                {
-                    path: 'edit',
-                    component: FormioResourceEditComponent
-                },
-                {
-                    path: 'delete',
-                    component: FormioResourceDeleteComponent
-                },
-                {
-                    path: 'participant',
-                    loadChildren: () => import('./participant/participant.module').then(x => x.ParticipantModule)
-                }
-            ]
+            provide: FormioResourceConfig,
+            useValue: {
+                name: 'event',
+                form: 'event'
+            }
         }
-    ])
-  ],
-  declarations: [ResourceComponent, ViewComponent],
-  providers: [
-      FormioResourceService,
-      {
-          provide: FormioResourceConfig,
-          useValue: {
-              name: 'event',
-              form: 'event'
-          }
-      }
-  ]
+    ]
 })
 export class EventModule { }

src/app/event/resource/resource.component.spec.ts

@@ -8,8 +8,8 @@ describe('ResourceComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ResourceComponent ]
-    })
+    imports: [ResourceComponent]
+})
     .compileComponents();
   }));
 

src/app/event/resource/resource.component.ts

@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
 import { FormioResourceComponent } from '@formio/angular/resource';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
     selector: 'app-resource',
     templateUrl: './resource.component.html',
     styleUrls: ['./resource.component.scss'],
-    standalone: false
+    imports: [RouterLink, RouterLinkActive, RouterOutlet]
 })
 export class ResourceComponent extends FormioResourceComponent {}

src/app/event/view/view.component.spec.ts

@@ -8,8 +8,8 @@ describe('ViewComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ViewComponent ]
-    })
+    imports: [ViewComponent]
+})
     .compileComponents();
   }));
 

src/app/event/view/view.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import { FormioResourceViewComponent } from '@formio/angular/resource';
+import { RouterLink } from '@angular/router';
+import { DatePipe } from '@angular/common';
 
 @Component({
     selector: 'app-view',
     templateUrl: './view.component.html',
     styleUrls: ['./view.component.scss'],
-    standalone: false
+    imports: [RouterLink, DatePipe]
 })
 export class ViewComponent extends FormioResourceViewComponent {}