angular cli generate guard

Angular CLI Generate Guard

If you want to protect your routes, you can use Angular Guards. Angular Guards are classes that implement the CanActivate interface, which decides whether a route can be activated or not. You can generate a Guard using the Angular CLI.

Steps to generate a Guard using the Angular CLI

1. Open your terminal or command prompt.
2. Navigate to your project folder.
3. Run the following command:

ng generate guard guard-name

This command will generate a new file named guard-name.guard.ts in the src/app/ directory.

Different ways to generate a Guard using the Angular CLI

You can also use the following commands to generate different types of Guards:

• CanActivate

ng generate guard guard-name --implements CanActivate

• CanActivateChild

ng generate guard guard-name --implements CanActivateChild

• CanDeactivate

ng generate guard guard-name --implements CanDeactivate

• Resolve

ng generate guard guard-name --implements Resolve

• CanLoad

ng generate guard guard-name --implements CanLoad

These commands will generate different types of Guards with the corresponding implements interface implemented.

Once you've generated a Guard, you can use it to protect your routes by adding it to the canActivate or canActivateChild properties in your routes configuration.

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [AuthGuard]
  }
];

In this example, the AuthGuard is used to protect the /protected route.

That's it! Now you know how to generate a Guard using the Angular CLI and how to use it to protect your routes.