CODEWITHSUNDEEP
angulartypescript
Arnold
Arnold

Reputation: 175

How to add a condition to the routes

I'm trying to add Auth0's authorisation using their tutorial: https://auth0.com/docs/quickstart/spa/angular2/07-authorization

I'm using ng2-admin, but they have such a different structure than usually. I found pages.routing.ts and I've added the third paramater. I also made the other auth.guard service from the tutorial. But whenever I go to the a page where I'm using the canActivate on. It simply loads the background and says: EXCEPTION: Uncaught (in promise): Error: DI Error.

I did a lot of debugging and I am 99% sure it's the canActivate that's causing the problem. Non of the other classes are even called.

In the example on auth0's website it also mentions: 

export const appRoutingProviders: any[] = [
  AuthGuard
];

Which I tried adding, but that didn't change anything.

I would like the route to call that canActivate so that I can Auth0's authentication. 

import { Routes, RouterModule }  from '@angular/router';
import { Pages } from './pages.component';
import { ModuleWithProviders } from '@angular/core';
import { AuthGuard } from '../auth.guard';
export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: 'app/pages/register/register.module#RegisterModule'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule',canActivate: [AuthGuard] },
      { path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule',canActivate: [AuthGuard] },
      { path: 'components', loadChildren: 'app/pages/components/components.module#ComponentsModule',canActivate: [AuthGuard] },
      { path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule',canActivate: [AuthGuard] },
      { path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule',canActivate: [AuthGuard] },
      { path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule',canActivate: [AuthGuard] },
      { path: 'tables', loadChildren: 'app/pages/tables/tables.module#TablesModule',canActivate: [AuthGuard] },
      { path: 'maps', loadChildren: 'app/pages/maps/maps.module#MapsModule',canActivate: [AuthGuard] },
      { path: 'new', loadChildren: 'app/pages/new/new.module',canActivate: [AuthGuard] }
    ]
  }
];

Upvotes: 0

Views: 1251

Answers (1)

mickdev
mickdev

Reputation: 2885

Try this in your routing file:

@NgModule({
  imports: [ 
    RouterModule.forRoot(routes), 
   ],
providers: [
    AuthGuard //add AuthGuard to provider
  ]
})

You can also add AuthGuard to AppModule providers so you don't need to provide it in every routing file.

Upvotes: 3

Related Questions