title: Angular - Provide guards across different modules
body: <p>Basically I have the following Angular modules at the moment:</p>
  
  <ol>
  <li><code>landing</code></li>
  <li><code>admin</code></li>
  <li><code>core</code></li>
  <li><code>shared</code></li>
  </ol>
  
  <p>What I would like is to register a new guard called <code>AuthenticationGuard</code> within the <code>shared</code> module and provide it accross the different modules.</p>
  
  <p>At the moment it only works, if I register the guard within the <code>landing-module</code> (which is the one I bootstrap) and neither if I register it in the <code>admin.module</code> or <code>shared.module</code>.</p>
  
  <p>If I do that, I receive an error stating the following:</p>
  
  <p><a href="https://i.stack.imgur.com/LdV2u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LdV2u.png" alt="enter image description here"></a></p>
  
  <p>The registration of the <code>guard</code> is done via <code>providers</code> array of the corresponding modules.</p>
  
  <p>My goal is to be able to use it across all modules.</p>
  
  <p>There was no issue to inject a service from an the <code>core</code> within the <code>admin</code> module - so I assume there must be a difference between <code>guards</code> and <code>services</code> over all?</p>
  
  <p>Currently some of the relevant files look like that (shortened for the sake of brevity):</p>
  
  <h2>landing.module.ts</h2>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { HomeComponent } from './home/home.component';
  import { LandingRoutingModule } from './landing.routing.module';
  
  import { SharedModule } from '../shared/shared.module';
  import { CoreModule } from '../core/core.module';
  import { SecurityModule } from '../security/security.module';
  import { AdminModule } from '../admin/admin.module';
  
  @NgModule({
    declarations: [
      HomeComponent
    ],
    imports: [
      SharedModule.forRoot(),
      CoreModule.forRoot(),
      SecurityModule,
      LandingRoutingModule
    ],
    providers: [],
    bootstrap: [HomeComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <h2>landing.routing.module</h2>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HttpClientModule } from '@angular/common/http';
  
  import { HomeComponent } from './home/home.component'
  import { NotFoundComponent } from './../shared/components/not-found/not-found.component';
  
  const appRoutes: Routes = [
    {
      path : '',
      redirectTo : '/login',
      pathMatch: 'full'
    },
    {
      path : 'admin',
      loadChildren: 'app/modules/admin/admin.module#AdminModule'
    },
    { 
      path: '**', 
      component: NotFoundComponent 
    }
  ];
  
  @NgModule({
    declarations: [],
    imports: [
      HttpClientModule,
      RouterModule.forRoot(
        appRoutes,
        { enableTracing: true }
      )
    ],
    exports: [
      RouterModule
    ],
  })
  
  export class LandingRoutingModule { }
  </code></pre>
  
  <h2>admin.module</h2>
  
  <pre><code>import { NgModule, ModuleWithProviders } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { SharedModule } from '../shared/shared.module';
  
  import { AdminLandingComponent } from './admin-landing/admin- 
  landing.component'
  import { AdminChildComponent } from './admin-child/admin-child.component'
  import { AdminRoutingModule } from './admin.routing.module';
  
  @NgModule({
    declarations: [
      AdminLandingComponent,
      AdminChildComponent
    ],
    imports: [
      CommonModule,
      AdminRoutingModule
    ],
  })
  export class AdminModule { }
  </code></pre>
  
  <h2>admin.routing.module</h2>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { AdminLandingComponent } from './admin-landing/admin- 
  landing.component';
  import { AdminChildComponent } from './admin-child/admin-child.component';
  
  import { AuthenticationGuard } from '../shared/guards/auth-guard.service'
  
  const adminRoutes: Routes = [
      {
          path: '',
          component: AdminLandingComponent,
          canActivate: [AuthenticationGuard],
          children: [
              {
                  path: '',
                  children: [
                      { path: 'child', component: AdminChildComponent }
                  ]
              }
          ]
      }
  ];
  
  @NgModule({
      declarations: [],
      imports: [
          RouterModule.forChild(adminRoutes)
      ],
      exports: [
          RouterModule
      ],
  })
  
  export class AdminRoutingModule { }
  </code></pre>
  
  <h2>shared.module</h2>
  
  <pre><code>import { NgModule, ModuleWithProviders } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { NotFoundComponent } from './components/not-found/not- 
  found.component'
  import { AuthenticationGuard } from './guards/auth-guard.service';
  
  @NgModule({
    declarations: [
      NotFoundComponent,  
    ],
    imports: [
      CommonModule
    ],
  })
  
  export class SharedModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SharedModule,
        providers: [AuthenticationGuard]
      };
    }
  }
  </code></pre>
  
  <h2>auth-guard.service</h2>
  
  <pre><code>import { Injectable }               from '@angular/core';
  import {
      CanActivate, Router,
      ActivatedRouteSnapshot,
      RouterStateSnapshot,
      CanActivateChild,
      NavigationExtras,
      CanLoad,
      Route
  }                                   from '@angular/router';
  import { AuthenticationService }    from '../../core/services/authentication-service/authentication.service';
  
  @Injectable()
  export class AuthenticationGuard implements CanActivate, CanActivateChild, CanLoad {
  
      constructor(private authService: AuthenticationService, private router: Router) { }
  
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
          return true;
      }
  
      canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
          return this.canActivate(route, state);
      }
  
      canLoad(route: Route): boolean {
          return true;
      }
  }
  </code></pre>