问题描述
我正在尝试在Angular 7上进行延迟加载,但出现以下错误
ERROR Error: Uncaught (in promise): Error: Cannot find module './admin/admin.module'
Error: Cannot find module './admin/admin.module'
at $_lazy_route_resource lazy namespace object:5
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:14191)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:14182)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
我已经创建了 admin.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AdminRoutingModule } from './admin.routing.module';
// imports de todos os components
@NgModule({
declarations: [
//all admin components
],imports: [
CommonModule,RouterModule,AdminRoutingModule,]
})
export class AdminModule { }
和 admin.routing.module.ts
import { NgModule } from "@angular/core";
import { RouterModule,Routes } from "@angular/router";
import { RestrictedGuardService } from ".././restricted-guard.service";
//imports responsible for routes
const routes: Routes = [ {
{
path: "usuario",component: AdminUsuariosComponent,canActivate: [RestrictedGuardService],data: { perfil: ["ROLE_ADMIN"] }
},//all other paths
...
} ]
@NgModule({
imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class AdminRoutingModule { }
在 app-routing.module 中,我包括了相对路径
{
path: 'admin',loadChildren: './admin/admin.module#AdminModule',data: { perfil: ["ROLE_ADMIN"] }
},
我试图检查我在stackoverflow上找到的其他一些解决方案,例如放置完整路径而不是相对路径。我试图删除“ canActivate”和“数据”以查看其是否有效
app.module.ts
import { APP_PROVIDERS } from "./app.providers";
import { browserModule } from "@angular/platform-browser";
import { NgModule,NO_ERRORS_SCHEMA,Injector } from "@angular/core";
import { HttpClient,HttpClientModule } from "@angular/common/http";
import { FormsModule,ReactiveFormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { browserAnimationsModule } from "@angular/platform-browser/animations";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import { MatButtonModule,MatCheckBoxModule,MatAutocompleteModule } from "@angular/material";
import { RouterModule,Router } from '@angular/router';
import { Http,XHRBackend,RequestOptions,HttpModule,JsonpModule} from "@angular/http";
import { AppRoutingModule } from "./app-routing.module";
//all libs
//all imports from components.ts (except admin components)
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient);
}
@NgModule({
declarations: [
// all components (except admin components)
],imports: [
browserModule,HttpClientModule,FormsModule,CommonModule,ReactiveFormsModule,InfiniteScrollModule,ModalModule,JsonpModule,FloatNumberPipeModule,MomentPipeModule,MomentTimePipeModule,TruncatePipeModule,SanitizerHtmlModule,NgxMaskModule.forRoot(),TranslateModule.forRoot({
loader: {
provide: TranslateLoader,useFactory: HttpLoaderFactory,deps: [HttpClient]
}
}),NgProgressModule.forRoot(),NgProgressRouterModule.forRoot(),NgProgressHttpModule.forRoot(),NgbCollapseModule,NgbTooltipModule,CollapseModule.forRoot(),browserAnimationsModule,NoopAnimationsModule,MatButtonModule,MatAutocompleteModule,FilterTagPipeModule,NgCircleProgressModule.forRoot({}),LyCommonModule,LyThemeModule.setTheme("minima-light"),LyToolbarModule,LyResizingCroppingImageModule,LyButtonModule,LyIconButtonModule,LyIconModule,LyInputModule,DeviceDetectorModule.forRoot(),CKEditorModule,FontAwesomeModule,NgxPaginationModule,NgxSpinnerModule,AppRoutingModule,],providers: [
APP_PROVIDERS,{
provide: Http,useFactory: xReducer,deps: [XHRBackend,Injector]
},{ provide: LY_THEME,useClass: MinimaLight,multi: true },useClass: MinimaDark,multi: true }
],bootstrap: [AppComponent],schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}
export function xReducer(
xhrBackend: XHRBackend,requestOptions: RequestOptions,injector: Injector
) {
return new InterceptedHttp(xhrBackend,requestOptions,injector);
}
解决方法
尝试使用模块导入的新语法:
loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule)