找不到模块：错误：无法解析'./app.module.ngfactory'-离子3，角度5

Question

After I installed ngx-translate module into the ionic app and implemented translations all over the custom pages I can't build my app anymore.

When I run

$ ionic cordova build browser --prod

I get the following exception:

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)

I tried every possible solution I could find on google and nothing worked.

Answer 1

Finally I tried with the most simple yet effective debugging strategy: removing all of the custom ionic pages from the app, adding them back one by one and continuously building the app. I found out I didn't use ngx-translate pipe correctly in one of the templates...

Answer 2

Just Try adding the following AngularCompiler Options object containing

• 'entryModule' property which is the path to the main module

• 'genDir' property which is the file where the generated ngfactory files for your components and modules will go

in the tsconfig.json file if this is not specified it in the AOT plugin Ex :

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

the above configuration solved the issue for me