prod build Angular 8 上的延迟加载中断答案

【问题标题】：Lazy loading broken on prod build Angular 8prod build Angular 8 上的延迟加载中断
【发布时间】：2019-07-25 18:07:50
【问题描述】：

我正在尝试让我的延迟加载路线在生产中工作。目前，在开发模式下一切正常，但当我切换到 AOT 时出现错误：TypeError: Cannot read property 'routeConfig' of undefined

我在一个使用最少代码的小型测试项目中重现了这个错误。我的延迟加载模块如下所示：

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 {
}

我的版本如下所示：

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

当我使用我们的自定义 webpack 构建时，我得到的原始错误是 Error: Runtime compiler is not loaded with production configuration。我已经切换到使用 CLI，现在错误已经改变。我不确定这些信息是否会有所帮助，但我认为信息越多越好。

我已经尝试清除 node_modules，我已经尝试 npm install acorn，我已经尝试删除所有旧的 webpack 插件和加载器以尝试消除冲突的 webpack 版本，我已经尝试了旧的 Angular v7 字符串语法用于延迟加载和许多其他事情。

更新我刚刚尝试创建一个全新的 Angular 应用程序并重现错误：Error: Runtime compiler is not loaded

【问题讨论】：

如果你不'useHash'，它有用吗？
您的问题可能来自LazyLoadedModule 配置和模块路由。你能把它加到你的问题中吗？？？？
@MartinChoraine 我已经在上面添加了代码！
@FranciscoSantorelli 删除 useHash 属性并不能解决问题。
@PranavRamachandran 我的 tsconfig 已经有了这些设置。我尝试降级我的 cli 版本，但没有奏效。有趣的是，我下载了 Angular Docs 延迟加载示例项目，并在我新的 cli 项目中的 package.json 中使用了这些依赖项，并且错误消失了。我将尝试找出导致问题的确切依赖关系。

标签： angular lazy-loading

【解决方案1】：

因此，在下载Angular sample lazy loading project 并使用该项目中package.json 中的依赖项后，我能够修复此错误。我已将所有@angular/ 包降级为^8.0.0 并设置"@angular-devkit/build-angular": "0.800.0"，一旦我这样做了，我的延迟加载又开始工作了。我认为问题出在 @angular-devkit/build-angular 软件包的最新版本上，但我不能确定。

我希望这对某人有所帮助，如果其他人遇到困难，我很乐意发布任何其他支持代码！

【讨论】：