Lazy loading broken on prod build Angular 8

问题

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

回答1:

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!

来源：https://stackoverflow.com/questions/57207896/lazy-loading-broken-on-prod-build-angular-8

标签

angular

lazy-loading