Angular

Question

目前我基本上有以下Angular个模块：

landing
admin
core
shared

我想在 shared 模块中注册一个名为 AuthenticationGuard 的新守卫，并在不同的模块中提供它。

目前它只工作，如果我在 landing-module 中注册守卫（这是我 bootstrap 中的那个），如果我在 admin.module 或shared.module.

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

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

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

从 admin 模块中的 core 注入服务没有问题 - 所以我认为 guards 和 services 之间一定存在差异总而言之？

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

landing.module.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 { }

landing.routing.module

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

admin.module

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

admin.routing.module

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

shared.module

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

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

根据您在此处提供的信息，我没有看到 AuthenticationService 在您的任何模块中添加为提供者。除非它在您的 app.modules.ts 中，但此处未显示。

Angular - 提供跨不同模块的守卫

Angular - Provide guards across different modules

angular-router

angular-module

angular-router-guards