Reputation: 65
I'm trying to do lazy loading on Angular 7 but I'm getting the error below
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
I have created 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 { }
And 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 { }
And in the app-routing.module I included the relative path
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule',
canActivate: [RestrictedGuardService],
data: { perfil: ["ROLE_ADMIN"] }
},
I have tried to check some other solutions that I found here on stackoverflow like putting the full path instead of the relative path. I tried to remove 'canActivate' and 'data' to see if it worked but it didn't
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,
HttpModule,
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,
MatCheckboxModule,
MatAutocompleteModule,
FilterTagPipeModule,
NgCircleProgressModule.forRoot({}),
LyCommonModule,
LyThemeModule.setTheme("minima-light"),
LyToolbarModule,
LyResizingCroppingImageModule,
LyButtonModule,
LyIconButtonModule,
LyIconModule,
LyInputModule,
DeviceDetectorModule.forRoot(),
CKEditorModule,
FontAwesomeModule,
NgxPaginationModule,
NgxSpinnerModule,
RouterModule,
AppRoutingModule,
],
providers: [
APP_PROVIDERS,
{
provide: Http,
useFactory: xReducer,
deps: [XHRBackend, RequestOptions, Injector]
},
{ provide: LY_THEME, useClass: MinimaLight, multi: true },
{ provide: LY_THEME, 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);
}
Upvotes: 0
Views: 271
Reputation: 60
Try with new syntax of module imports :
loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule)
Upvotes: 1