Angular - 跨不同模块提供防护

Question

基本上我现在有以下 Angular 模块：

1. landing
2. admin
3. core
4. shared

我想要的是注册一个在模块AuthenticationGuard内调用的新守卫shared，并在不同的模块中提供它。

目前，只有当我在landing-module( 这是我引导的) 中注册守卫时，它才起作用，而如果我在 或 中注册它，它也admin.module不起作用shared.module。

如果我这样做，我会收到一条错误消息，内容如下：

注册guard是通过providers相应模块的数组完成的。

我的目标是能够在所有模块中使用它。

core从模块内注入服务没有问题- 所以我认为两者admin之间一定存在差异？guardsservices

目前一些相关文件看起来像这样（为了简洁起见缩短了）：

登陆模块.ts

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 { }

登陆路由模块

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 { }

管理模块

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 { }

管理路由模块

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 { }

共享模块

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]
    };
  }
}

auth-guard.service

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;
    }
}

Answer 1

您需要AuthenticationService在数组中导入模块装饰器providers。这就是该错误所指示的内容！

根据您此处的内容，我没有看到AuthenticationService在您的任何模块中添加为提供者。除非它在你的app.modules.ts这里不显示。