产品构建Angular 8上的延迟加载失败

时间:2019-07-25 18:07:50

标签: angular lazy-loading

我正在尝试让我的延迟加载路由投入生产。当前,在开发模式下一切正常,但是当我切换到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

1 个答案:

答案 0 :(得分:0)

因此,在下载Angular sample lazy loading project并使用该项目的package.json中的依赖项后,我得以解决此错误。我已将所有@angular/软件包降级为^8.0.0,并在完成惰性加载重新开始后也设置了"@angular-devkit/build-angular": "0.800.0"。我认为问题出在@angular-devkit/build-angular软件包的最新版本中,但我不确定。

我希望这对某人有帮助,如果有人卡住,我很乐意发布任何其他支持代码!