Question

我一直试图让一个延迟加载的模块在一个简单的AOT + Webpack Angular 2设置中工作。

以下是我的核心设置，如果其他任何内容对创建更多上下文有用，请告诉我，我会更新问题。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es6"],
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "outDir": "build/tmp",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "node",
      "jasmine"
    ]
  },
  "exclude": [
    "build",
    "dist",
    "node_modules",
    "src/main.aot.ts",
    "tmp"
  ],
  "angularCompilerOptions": {
    "debug": true,
    "genDir": "build",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

app.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: 'lazy', loadChildren: './sections/lazy/lazy.module#RecipesModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

webpack.prod.js

// ...
module: {
  rules: [
    {
      test: /\.ts$/,
      loader: '@ngtools/webpack',
    }
  ]
}
// ...
plugins: [
  // ...
  new AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: helpers.root('src/app/app.module#AppModule')
  }),
  // ...
]
// ...

构建过程完成没有任何问题，但当我尝试导航到Error: Uncaught (in promise): Error: Cannot find module './sections/lazy/lazy.module.ngfactory'.网址时出现错误/lazy。

在开发/ JIT中运行应用程序也没有任何问题。

你发现有什么问题吗？

由于

Answer 1

我通过删除我在webpack build上使用的ContextReplacementPlugin解决了这个问题。

我的plugin文件中有以下webpack.config条目导致此问题：

// Workaround for angular/angular#11580
new ContextReplacementPlugin(
  // The (\\|\/) piece accounts for path separators in *nix and Windows
  // https://github.com/angular/angular.io/issues/3514
  /angular(\\|\/)core(\\|\/)@angular/,
  helpers.root('src'), // location of your src
  {} // a map of your routes
),

我的项目配置基于angular-starter repo，我可能没有正确使用ContextReplacementPlugin插件。

在Angular 2 Webpack + AOT设置中找不到模块'./sections/lazy/lazy.module.ngfactory'错误

1 个答案: