fix: standalone migration

Author: aboudard

projects/sandbox/src/app/app-routing.module.ts

@@ -5,13 +5,11 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
+    imports: [
+        RouterTestingModule,
         AppComponent
-      ],
-    }).compileComponents();
+    ]
+}).compileComponents();
   });
 
   it('should create the app', () => {

projects/sandbox/src/app/app.component.spec.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterLink, RouterLinkActive, RouterOutlet]
 })
 export class AppComponent {
 

projects/sandbox/src/app/app.component.ts

@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+  {
+    path: 'users',
+    title: 'Users',
+    loadChildren: () => import('./users/users.routes').then((m) => m.routes),
+  },
+  {
+    path: 'home',
+    title: 'Home',
+    loadChildren: () => import('./home/home.routes').then((m) => m.routes),
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'home',
+  },
+];

projects/sandbox/src/app/app.module.ts

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

projects/sandbox/src/app/app.routes.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+    standalone: true
 })
 export class HomeComponent implements OnInit {
 

projects/sandbox/src/app/home/home-routing.module.ts

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+export const routes: Routes = [{ path: '', component: HomeComponent }];

projects/sandbox/src/app/home/home.component.spec.ts

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

projects/sandbox/src/app/home/home.component.ts

@@ -1,14 +1,17 @@
 import { Component, OnInit, TrackByFunction } from '@angular/core';
+import { NgFor } from '@angular/common';
 
 interface User {
   id: number;
   name: string;
 }
 
 @Component({
-  selector: 'app-users',
-  templateUrl: './users.component.html',
-  styleUrls: ['./users.component.scss']
+    selector: 'app-users',
+    templateUrl: './users.component.html',
+    styleUrls: ['./users.component.scss'],
+    standalone: true,
+    imports: [NgFor]
 })
 export class UsersComponent implements OnInit {
 

projects/sandbox/src/app/home/home.module.ts

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { UsersComponent } from './users.component';
+
+export const routes: Routes = [{ path: '', component: UsersComponent }];

projects/sandbox/src/app/home/home.routes.ts

@@ -1,12 +1,17 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 
-import { AppModule } from './app/app.module';
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { AppComponent } from './app/app.component';
+import { appRoutes } from './app/app.routes';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    importProvidersFrom(BrowserModule, RouterModule.forRoot(appRoutes)),
+  ],
+}).catch((err) => console.error(err));