4

I'm trying to get my lazy loaded routes to work in production. Currently, everything works fine in development mode but when I switch to AOT I get the error: TypeError: Cannot read property 'routeConfig' of undefined

I've got this error reproduced in a tiny test project with a minimal amount of code. My lazy loaded modules look like this:

const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'lazy',
        loadChildren: () => import('./lazy-loaded-component/lazy-loaded.module').then(m => m.LazyLoadedModule)
    },
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(routes, {useHash: true}),
        FormsModule,
    ],
    declarations: [
        AppComponent,
        HomeComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

lazy-loaded.module:

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {RouterModule, Routes} from "@angular/router";
import {LazyLoadedComponent} from "./lazy-loaded.component";

const routes: Routes = [
    {
        path: '',
        component: LazyLoadedComponent
    }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule],
    declarations: [LazyLoadedComponent]
})
export class LazyLoadedModule {
}

My versions look like this:

Angular CLI: 8.1.2
Node: 10.16.0
OS: win32 x64
Angular: 8.1.2
... animations, cli, common, compiler, core, elements, forms
... language-service, platform-browser, platform-browser-dynamic
... router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.8.9
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@angular/compiler-cli             8.2.0-next.2
@ngtools/webpack                  6.2.9
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

The original error that I was getting was Error: Runtime compiler is not loaded with production configuration when I was using our custom webpack build. I have since switched to using the CLI and now the error has changed. I'm not sure if that information would be helpful but I figure the more info the better.

I've tried clearing out node_modules, I've tried npm install acorn, I've tried removing all old webpack plugins and loaders to try and eliminate colliding webpack versions, I've tried the old Angular v7 string syntax for lazy loading, and many other things.

Update I just tried creating a completely fresh Angular application and reproduced the error: Error: Runtime compiler is not loaded

8
  • if you dont 'useHash', does it work? Commented Jul 25, 2019 at 18:15
  • You problem could come from LazyLoadedModule configuration and module routing. Can you add it to you question please 😊? Commented Jul 25, 2019 at 18:25
  • @MartinChoraine I have added that code above! Commented Jul 25, 2019 at 18:28
  • @FranciscoSantorelli removing the useHash property does not fix the issue. Commented Jul 25, 2019 at 18:30
  • 1
    @PranavRamachandran my tsconfig already had those settings. I tried downgrading my cli version and that didn't work. Interestingly, I downloaded the Angular Docs lazy loading example project and used those dependencies in the package.json in my fresh cli project and the error has gone away. I am going to try and track down the exact dependency that is causing the issue. Commented Jul 25, 2019 at 19:53

1 Answer 1

2

So after downloading the Angular sample lazy loading project and using the dependencies found in the package.json in that project I was able to fix this error. I've downgraded all of my @angular/ packages to ^8.0.0 and also set "@angular-devkit/build-angular": "0.800.0" once I did that my lazy loading started working again. I think the issue is coming from the @angular-devkit/build-angular package's most recent version but I can't be sure.

I hope this helps someone, I would be happy to post any other supporting code if someone else gets stuck!

Sign up to request clarification or add additional context in comments.

Comments

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.