1. Standalone Components

Challenge 1 - Migrate to standalone components

Currently our application is build using modules. Four our first challenge we will update the architecture of our app and use standalone components. A few steps are needed to achieve this:

• make components standalone
• remove modules
• update bootstrapping and other settings (like routing)

1. Create a new configuration file

• Currently the main configurations of the app (base routing, including the HttpClientModule) are defined in the app.module.ts file. We will move this configuration to a new file and remove the AppModule completely since it will not be needed anymore, in the context of standalone components.

• Create a new file app.config.ts in the src folder. Add a configuration object with the following properties:

const routes: Route[] = []

export const appConfig: ApplicationConfig = { 
    providers: [
        provideHttpClient(),  // <-- new http configuration
        provideRouter(routes) // <-- new router configuration - keep the routes empty for now
    ]
}

2. Update the AppComponent

• The AppComponent is the root component of our application. We need to convert it to a standalone component and update the imports accordingly.

@Component({
  selector: 'ngm-root',
  standalone: true, // <-- new property, make component standalone
  imports: [MovieListComponent, RouterOutlet, RouterLink],, // <-- new imports 
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

3. Update main.ts

• We will bootstrap the application using the bootstrapApplication method from @angular/platform-browser and the appConfig object we created in the previous step.

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

4. Update movie routes and add main route configs

• Router configurations for the movie feature are listed in the movies.module.ts file. We will move them a separate file and use them in the app.config.ts file.
• Create a new file movies.routes.ts in the movies folder and update the routes configuration using loadComponent for each route:

export const movieRoutes: Route[] = [
  {
    path: '',
    loadComponent: () =>
      import('./components/movie-list/movie-list.component').then(
        (c) => c.MovieListComponent
      ),
  },
  {
    path: 'new',
    loadComponent: () =>
      import('./components/movie-detail/movie-detail.component').then(
        (c) => c.MovieDetailComponent
      ),
  },
  {
    path: ':id',
    loadComponent: () =>
      import('./components/movie-detail/movie-detail.component').then(
        (c) => c.MovieDetailComponent
      ),
  },
];

• Update the app.config.ts file to use the new routes configuration:

const routes: Route[] = [
  { path: '', component: HomeComponent },
  {
    path: 'movies',
    loadChildren: () =>
      import('./movies/movies.routes').then((m) => m.movieRoutes),
  },
];

5. Update the components

• Update the HomeComponent, MovieListComponent, MovieItem and MovieDetailComponent to use the new standalone component configuration, similar to the AppComponent:
  • add standalone: true to the @Component decorator of each component
  • update the imports property to include the necessary modules and components, based on what's being used in the template

6. Remove the modules

• You can now safely remove the AppModule and MoviesModule modules.

Rerun the app and make sure everything works as before.

Diffs

DOCUMENTATION

Migrating to standalone components