用于延迟加载模块的 Angular 4.3 拦截器 [英] Angular 4.3 Interceptors for Lazy Loaded Modules
问题描述
在延迟加载的功能模块和功能子模块中使用核心模块服务的最佳实践是什么.
根据 Angular 风格指南，我有以下内容
What is the best practice to use core module service in lazy loaded feature module and feature child modules.
As per Angular style guide I have the following
app
-core
- core.module.ts
-logger.service.ts
-token-interceptor.service.ts
-authentication.service.ts
-shared
-shared.module.ts
-base module (my feature base , lazy loaded with router-outlet)
-base.module.ts
-base.routing.module.ts
-base
-base.component.ts
-admin (lazy loaded , child module of base module)
-admin.module.ts
-admin.routing.ts
-admin-component.ts
-report(lazy loaded , child module of base module, sibling of admin)
-report.module.ts
-report.routing.ts
-report-component.ts
如果我在所有功能模块中添加 TokenInterceptorService 作为提供者，则 HTTP 拦截器工作.当我将它添加到 App 模块中时，(但不是在延迟加载功能模块中)它不会拦截延迟加载功能模块中触发的 http 请求.
If I add TokenInterceptorService as a provider in all feature module,then HTTP interceptor works. When I add it in App module,(but not in lazy loaded feature module) it does not intercept http request triggered in lazy loaded feature module.
使用核心模块中声明的服务/拦截器的最佳实践是什么.
What is the best practice, of using services/interceptor declared in core module.
app.module.ts
app.module.ts
@NgModule({
declarations: [
AppComponent,
LoginComponent,
],
imports: [
BrowserModule,BrowserAnimationsModule, CoreModule, AppRoutingModule, FormsModule
], providers: [{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
app-routing.module.ts
@NgModule({
imports: [
RouterModule.forRoot([
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'base', pathMatch: 'full' },
{ path: 'base', loadChildren: 'app/base/base.module#BaseModule' }
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
core.module.ts
core.module.ts
@NgModule({
imports: [
CommonModule, HttpModule,
],
declarations: [],
providers: [LoggerService, AuthenticationService]
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}
token-interceptor.service.ts
token-interceptor.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import { AuthenticationService } from './authentication.service';
@Injectable()
export class TokenInterceptorService implements HttpInterceptor {
constructor(public auth: AuthenticationService, private router: Router) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Adding authorization header')
request = request.clone({
setHeaders: { authorization: this.auth.getToken() }
});
console.log('Added authorization header')
return next.handle(request).do(event => { }, (err: HttpErrorResponse) => {
console.log("Error ===>", err);
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
console.log('An error occurred:', err.error.message);
} else if (err.status == 401) {
console.log('Status 401 unautorized');
this.router.navigate(['/login']);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
}
return Observable.throw(new Error('Your custom error'));
});;
}
}
base.module.ts
base.module.ts
@NgModule({
imports: [
CommonModule, BaseRoutingModule
],
declarations: [BaseComponent],
providers: [],
})
export class BaseModule {
constructor( @Optional() @SkipSelf() parentModule: BaseModule) {
if (parentModule) {
throw new Error(
'BaseModule is already loaded. Import it in the AppModule only');
}
}
}
base.routing.module.ts
base.routing.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: '', component: BaseComponent,
children: [
{ path: '', redirectTo: 'admin', pathMatch: 'full' },
{ path: 'admin', loadChildren: 'app/base/admin/admin.module#AdminModule' },
]
}])
],
exports: [
RouterModule
]
})
export class BaseRoutingModule {
}
admin.module.ts
admin.module.ts
@NgModule({
imports: [
CommonModule, FormsModule, HttpClientModule, AdminRoutingModule,BusyModule
],
declarations: [UserListComponent, UserComponent, MenuListComponent, MenuComponent, CodeListComponent, CodeComponent],
providers: [CodeService, UserService, MenuService,{ provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true }]
})
export class AdminModule { }
admin.routing.module.ts
admin.routing.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
children: [
{ path: '', redirectTo:'code-list', pathMatch: 'full' },
{ path: 'code-list', component: CodeListComponent },
{ path: 'code/:id', component: CodeComponent },
{ path: 'user-list', component: UserListComponent },
{ path: 'user/:id', component: UserComponent },
{ path: 'menu-list', component: MenuListComponent },
{ path: 'menu/:id', component: MenuComponent },
]
}
])
],
exports: [
RouterModule
]
})
export class AdminRoutingModule {
}
推荐答案
您不必为拦截器创建提供程序.您应该使用 forRoot() 导出您的 CoreModule:
You don't have to create a provider for your interceptor.
You should export your CoreModule with forRoot():
@NgModule({
imports: [
CommonModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
RouterModule.forRoot(
[],
{enableTracing: true}
),
],
declarations: [],
providers: [DatePipe]
})
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: [
{provide: 'Window', useValue: window},
{provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true},
SORT_TYPES_PROVIDER,
ApiService,
AnimationService,
BillingService,
UserService,
...
]
};
}
}
然后将它导入到您的 AppModule 中，完全忘记 CoreModule 导入.这只是一个必须明确使用的地方.您所有的延迟加载模块都将通过 DI 获取您的服务等.
Then import it in your AppModule and forget about CoreModule imports at all. This is only one place it has to be explicitly used. All your lazy loaded modules will take your services etc by DI.
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SharedModule,
CoreModule.forRoot(),
FeaturesModule,
PublicModule,
RouterModule.forRoot([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
此外，您无需为每个模块创建单独的路由模块.只需导出 RouterModule.forChild 返回的内容，并在需要它的模块的imports 中使用它.
Also you don't need to create a separate routing module for each module. Just export what RouterModule.forChild returns and use it in imports of your module that needs it.
export const publicRouting: ModuleWithProviders = RouterModule.forChild([
{
path: 'login',
pathMatch: 'full',
component: SignInComponent,
data: {
breadcrumb: 'LGN_TL'
},
canActivate: [AuthenticatedGuard]
},
{
path: '',
component: GlobalComponent,
loadChildren: '../protected/protected.module#ProtectedModule',
canLoad: [AuthCanLoadGuard]
},
{path: '**', component: PageNotFoundComponent}
]);
更新.路由建议不是样式指南.像以前一样使用 RoutingModule (https://angular.io/guide/styleguide#angular-ngmodule-names)
UPD. suggestion for routing not a styleguide. Use RoutingModule as before (https://angular.io/guide/styleguide#angular-ngmodule-names)
这篇关于用于延迟加载模块的 Angular 4.3 拦截器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
