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
LazyLoadedModuleconfiguration and module routing. Can you add it to you question please 😊?useHashproperty does not fix the issue.