Module not found: Error: Can't resolve './app.module.ngfactory' - ionic 3, angular 5

Module not found: Error: Can't resolve './app.module.ngfactory' - ionic 3, angular 5

在我将 ngx-translate 模块安装到 ionic 应用程序并在所有自定义页面上实现翻译后,我无法再构建我的应用程序。

当我运行

$ ionic cordova build browser --prod

我得到以下异常:

Running app-scripts build: --prod --platform browser --target cordova
[15:30:02]  build prod started ... 
[15:30:02]  clean started ... 
[15:30:02]  clean finished in 3 ms 
[15:30:02]  copy started ... 
[15:30:03]  deeplinks started ... 
[15:30:03]  deeplinks finished in 207 ms 
[15:30:03]  ngc started ... 
[15:30:09]  ngc finished in 6.48 s 
[15:30:09]  preprocess started ... 
[15:30:09]  preprocess finished in 1 ms 
[15:30:09]  webpack started ... 
[15:30:09]  copy finished in 6.93 s 
Error: ./src/app/main.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in '/projects/myApp/src/app'
resolve './app.module.ngfactory' in '/projects/myApp/src/app'
  using description file: /projects/myApp/package.json (relative path: ./src/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /projects/myApp/package.json (relative path: ./src/app)
    using description file: /projects/myApp/package.json (relative path: ./src/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /projects/myApp/src/app/app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /projects/myApp/src/app/app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /projects/myApp/src/app/app.module.ngfactory.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /projects/myApp/src/app/app.module.ngfactory.json doesn't exist
      as directory
        /projects/myApp/src/app/app.module.ngfactory doesn't exist
[/projects/myApp/src/app/app.module.ngfactory]
[/projects/myApp/src/app/app.module.ngfactory.ts]
[/projects/myApp/src/app/app.module.ngfactory.js]
[/projects/myApp/src/app/app.module.ngfactory.json]
[/projects/myApp/src/app/app.module.ngfactory]
 @ ./src/app/main.ts 2:0-60
    at new BuildError (/projects/myApp/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at callback (/projects/myApp/node_modules/@ionic/app-scripts/dist/webpack.js:121:28)
    at emitRecords.err (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:269:13)
    at Compiler.emitRecords (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:375:38)
    at emitAssets.err (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:262:10)
    at applyPluginsAsyncSeries1.err (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/projects/myApp/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/projects/myApp/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/projects/myApp/node_modules/@ionic/app-scripts/node_modules/webpack/lib/Compiler.js:365:9)

我尝试了在 google 上找到的所有可能的解决方案,但没有任何效果。

最后我尝试了最简单但最有效的调试策略:从应用程序中删除所有自定义离子页面,将它们一个接一个地添加回来并不断构建应用程序。我发现我没有在其中一个模板中正确使用 ngx-translate 管道...

只需尝试添加以下包含

的 AngularCompiler 选项对象
  • 'entryModule' 属性 这是主模块的路径

  • 'genDir' 属性 这是为您的组件和模块生成的 ngfactory 文件所在的文件

tsconfig.json 文件中,如果没有在 AOT 插件中指定它 例如:

{
  "angularCompilerOptions": {
    "entryModule": "./app/app.module#AppModule",
    "genDir": "../ngfactory"
  },
  "compilerOptions": {
  }
}

以上配置解决了我的问题