How do I set up routing in an Angular application using Angular CLI?

How do I set up routing in an Angular application using Angular CLI?

To set up routing in an Angular application, you can use the Angular CLI to generate a routing module. First, create a new Angular project using ng new my-app. Then, navigate to your project folder and run ng generate module app-routing --flat --module=app.

What does the --flat option do in the command?

The --flat option tells the Angular CLI to create the routing module file in the same directory as the app module, rather than in a separate folder.

How do I define routes in the app-routing.module.ts file?

In the app-routing.module.ts file, you can define routes by importing RouterModule and using the Routes array. For example:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Can I lazy load routes in Angular?

Yes, you can lazy load routes in Angular by using the loadChildren property in your route configuration. This allows you to load modules only when the route is accessed.