How to apply routing guards to feature module routing modules?

Question

So, I'm building an Angular 4 app that I want all routes to be protected (except for the login route of course). I'm trying to use feature modules and feature module routing. So, imagine something like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuardService } from './auth/auth-guard.service';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ProtectedRouteComponent } from './protected-route/protected-route.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent }, // no auth guard for login
  {
    path: '',
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        children: [
          { path: 'register', component: RegisterComponent },
          { path: 'protected', component: ProtectedRouteComponent }
        ]
      }
    ]
  }
];

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

, for the root module, and then a users feature module routing config like:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UsersComponent } from './users.component';

const routes: Routes = [
  { path: 'users', component: UsersComponent }
];

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

What would be the best way to:

Keep using feature module routing, and
Apply the route guards to the users feature module routing without replicating the canActivate guard? Is there any way I can pass it on to the users feature module routing from the root routing module?

Thanks,
Iraklis

This has been answered? https://stackoverflow.com/questions/35374104/angular-2-authentication-with-child-routes — Vega, Aug 19 '17 at 17:59
if you want to reuse your guard make use of a shared module to be available across your app — Rahul Singh, Aug 19 '17 at 18:06
Thanks Rahul, I could do that indeed. However my question is more around creating a configuration that allows my guard to be "inherited" and applied to routes configured in feature modules. What would be the best practice way to achieve this? — Iraklis Alexopoulos, Aug 19 '17 at 18:52
I guess no there is no way to do what you want. You can use a service to make methods be the same but it is a little hacky. — Lyubimov Roman, Aug 19 '17 at 19:39

score 0 · Answer 1 · answered Nov 22 '19 at 08:19

Was looking for the same and the solution I found involves the following steps:

Do not import your feature module via app modules
Instead import the feature module as part of your app module routes

{
    path: '',
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        children: [
          { path: 'register', component: RegisterComponent },
          { path: 'protected', component: ProtectedRouteComponent }
        ]
      },
      {
        path: '',
        children: () => UsersModule
      }
    ]
  }

One thing to consider:

Other modules will NOT have access to your UserModule's components and services (until you have visited one of the /users routes)
This might not be a problem as your modules might already be well separated

How to apply routing guards to feature module routing modules?

1 Answers1