Lazy loading Error: Cannot find module - Angular 7

Question

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);
}

Answer 1

Try with new syntax of module imports :

loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule)