[英]Angular 6 Feature Modules : Interceptor not firing
我第一次使用功能模块,无法启动拦截器。 我是要素模型模式的新手,希望有人可以指出我的理解中的明显错误。 拦截器称为“ AuthenticationInterceptor”。 我将代码粘贴在下面,非常感谢您的帮助。
我的代码库的结构如下:
/ app
app.module.ts
...
/dashboard
dashboard.module.ts
dashboard-routing.module.ts
dashboard.component.ts
...
/core
core.module.ts
...
/shared
shared.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 {}
应用程序路由模块
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 {}
共享模块
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: []
}
}
}
核心模块
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
]
}
}
}
仪表板模块
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 { }
仪表板布线模块
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 {}
如果每次为功能模块导入HttpClientModule
,那么对于模块的每个实例,都会有一个新的HttpClientModule
实例。 这就是您的拦截器不起作用的原因。 仅在app.module.ts
导入HttpClientModule
,它将拦截所有HTTP请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.