Angular 8生产环境下懒加载失败

Question

我正在尝试让我的懒加载路由在生产环境中工作。目前，在开发模式下一切都正常，但是当我切换到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插件和加载器以消除版本冲突，尝试过使用旧的Angular v7字符串语法进行懒加载，还做了很多其他事情。 更新 我刚刚尝试创建一个全新的Angular应用程序并重现了错误：Error: Runtime compiler is not loaded。

- Justin

---

如果你不使用哈希，它能正常工作吗？ - Francisco Santorelli

@MartinChoraine 我已经在上面添加了那段代码！ - Justin

@FranciscoSantorelli 移除 useHash 属性并不能解决这个问题。 - Justin

@PranavRamachandran 表示已经添加了，但错误仍然存在。 - Justin

@PranavRamachandran 我的 tsconfig 已经有了那些设置。我尝试降级我的 cli 版本，但是没有起作用。有趣的是，我下载了 Angular 文档中的懒加载示例项目，并在我的新 cli 项目中使用了那些依赖项，在这种情况下错误已经消失了。我将尝试追踪导致此问题的确切依赖项。 - Justin

Answer 1

最初的回答：

在下载了Angular示例懒加载项目并使用该项目中的package.json文件里的依赖后，我成功解决了这个错误。我将所有的@angular/包降级到了^8.0.0并设置了"@angular-devkit/build-angular": "0.800.0"，这样我的懒加载就可以正常工作了。我认为问题出在@angular-devkit/build-angular包的最新版本，但我不能确定。

希望这能帮到某些人，如果有人卡在这里，我很乐意发布其他支持代码！

- Justin