Error Guarding Routes in Angular CLI

Question

OS: linux x64 Ubuntu 16.04

Angular Versions

• angular-cli: 1.0.0-beta.24
• node: 7.2.0
• npm: 3.10.9

I created a project with the Angular CLI, but the problem is that when I update the page the current route is broken, that happens when I use CanActivate in the paths of my routes, I could not use it and it works, but I have to protect the routes.

This is my code in app.routing.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'reports', component: ReportsComponent, canActivate: [AuthGuard] },
  { path: 'reports/thirds', component: ReportThirdsComponent, canActivate: [AuthGuard] },
  { path: 'reports/profit-loss', component: ReportProfitLossComponent, canActivate: [AuthGuard] },
  { path: 'reports/balance', component: ReportBalanceComponent, canActivate: [AuthGuard] },
];

Answer 1

Regarding your app.routing.ts file, I think that everything is correct. Assuming your file AuthGuard is something like this:

export class AuthGuard implements CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable <boolean> | boolean{ return true|false; } }

The problem can be in your app.module.ts file. It is obligatory to have your guard in the providers section. Have you checked that you have in that file the providers section like this?

  providers: [AuthGuard],