0

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);
}
2
  • Nowhere in the code you provided does it show you importing blog.module. Where are you importing blog.module. How are you trying to use it? Commented Sep 18, 2020 at 22:25
  • ooops, copy and paste wrong. I had tested it on another module (the blog module in this case) and it gave the same error. Commented Sep 19, 2020 at 0:58

1 Answer 1

1

Try with new syntax of module imports :

loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule)
Sign up to request clarification or add additional context in comments.

3 Comments

I tried but it didn't work. I believe this new syntax is from Angular 8 +.
try to migrate your app, it will be better for performance and some new features, there are no major change of code between version 7 and 8
can you please add here you app.module.ts file.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.