Question

我第一次使用功能模块，无法启动拦截器。我是要素模型模式的新手，希望有人可以指出我的理解中的明显错误。拦截器称为“ AuthenticationInterceptor”。我将代码粘贴在下面，非常感谢您的帮助。

我的代码库的结构如下：

/ app

app.module.ts
...
/dashboard
    dashboard.module.ts
    dashboard-routing.module.ts
    dashboard.component.ts
    ...
/core
    core.module.ts
    ...
/shared
    shared.module.ts
    ....

APP.MODULE.TS

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CoreModule } from './core/core.module'
import { SharedModule } from './shared/shared.module'
import { DashboardModule } from './dashboard/dashboard.module'

import { AppComponent } from './app.component';

import { AuthenticationInterceptor } from './core/interceptors/authentication.interceptor'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule.forRoot(),
    DashboardModule
  ],
  exports: [
    MaterialModule
  ],
  providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthenticationInterceptor,
        multi: true
    } 
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

APP-ROUTING.MODULE.TS

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { 
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

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

SHARED.MODULE.TS

import { NgModule, ModuleWithProviders } from '@angular/core'
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@NgModule({
    imports: [
    CommonModule,
    FormsModule,
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule, 
    ReactiveFormsModule,
  ]
})
export class SharedModule { 

  static forRoot() {

    return {
        ngModule: SharedModule,
        providers: []
    }
  }
}

CORE.MODULE.TS

import { NgModule, ModuleWithProviders, Optional, SkipSelf } from '@angular/core'
import { HttpModule } from '@angular/http'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AuthenticationInterceptor } from './interceptors/authentication.interceptor'

@NgModule({
    imports: [
        HttpModule,
        HttpClientModule
    ]  
})
export class CoreModule {

    constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

        if (parentModule) {
            throw new Error('CoreModule is already loaded. Import it in the AppModule only');
        }
    }

    static forRoot(): ModuleWithProviders {

        return {
            ngModule: CoreModule,
            providers: [
                AuthenticationInterceptor
            ]  
        }
    }    
}

DASHBOARD.MODULE.TS

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { SharedModule } from '../shared/shared.module'
import { AuthenticationInterceptor } from './../core/interceptors/authentication.interceptor'

import { DashboardRoutingModule } from './dashboard-routing.module'
import { DashboardComponent } from './dashboard.component'

@NgModule({
    imports: [
        CommonModule,
        DashboardRoutingModule,
        SharedModule,
    ],
    declarations: [
        DashboardComponent
    ],
    exports: [
        DashboardComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthenticationInterceptor,
            multi: true
        }
    ]
})
export class DashboardModule { }

仪表板路由.MODULE.TS

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { AuthenticationGuard } from './../core/guards/authentication.guard';

const routes: Routes = [
    { 
    path: '', 
        component: DashboardComponent,
        canActivate: [
            AuthenticationGuard
        ]
    }
];

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

Answer 1

如果每次为功能模块导入HttpClientModule，那么对于模块的每个实例，都会有一个新的HttpClientModule实例。这就是您的拦截器不起作用的原因。仅在HttpClientModule处导入app.module.ts，它将拦截所有HTTP请求。

Angular 6功能模块：拦截器不触发

1 个答案: