は、私はシンプルなAOT + WebPACKの角度2で動作するように怠惰なロードされたモジュールを取得するために、しばらくの間しようとしている角度2のWebPACK + AOTセットアップ

Question

にモジュールの./sections/lazy/lazy.module.ngfactory 'エラーを見つけることができませんセットアップ。何かが私に教えてくださいより多くのコンテキストを作成するのに有用であると私は質問を更新する場合はここで

は、私のコア設定です。

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') 
    }), 
    // ... 
] 
// ... 

ビルドプロセスは問題なく完了しますが、 URLにナビゲートしようとするとエラーError: Uncaught (in promise): Error: Cannot find module './sections/lazy/lazy.module.ngfactory'.が発生します。

また開発/ JITでアプリを実行するには、どんな問題なく動作します。

あなたはすべての問題を見つけるのですか？

おかげ

Answer 1

私はWebPACKのビルドに使用していたContextReplacementPluginを除去することによって、問題を解決しました。

私が問題を引き起こしていた私のwebpack.configファイルに次のpluginのエントリを持っていた：私のプロジェクト構成がangular-starter repoに基づいていたと私はおそらく正しくContextReplacementPluginプラグインを使用していませんでした

// 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 
), 

。