Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in

[mappedinn]

I know that the question related to the Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in... has been asked many times here. But, I think it is quiet interesting situation here
that I am trying to describe below:

I having node installed on 2 machines running Ubuntu 16.10 and Ubuntu 17.04.

1. On ubuntu 16.04

Node is installed through these command lines:

sudo apt-get install python-software-properties
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install nodejs

2. On ubuntu 17.04

Ubuntu 17.04 is already with a new version of node. The installation is done through

sudo apt-get install nodejs

3. What is in common between the 2 machines?

3.1. The version of node and npm are:

node -v
# v7.10.0

npm -v
# 4.2.0

3.2. The angular4 application is created through @angular/cli

sudo npm install -g @angular/cli
ng new my-app

3.3. A repo on githbub for the angular4 application with docker

The both machine are using the same repo angular4-on-nginx-with-docker

4. What is the difference???

4.1. On Ubuntu 16.10

$ ng build --prod 

Hash: 64b40519b4565aa62e0b                                                              
Time: 10106ms
chunk    {0} polyfills.71b130084c52939ca448.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.e81f19d3f6b27a436c79.bundle.js (main) 1.09 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.f7457d5ac1e9743fd76f.bundle.js (vendor) 849 kB [initial] [rendered]
chunk    {4} inline.18e445e37a0efd4dcfa2.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/amine/DockerProjects/tt/nginx/frontend/src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

PS: ./src/main.ts is:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

4.2. On Ubuntu 17.04

$ ng build --prod 
Hash: ab00cb280399614d6ea9                                                              
Time: 16640ms
chunk    {0} polyfills.71b130084c52939ca448.bundle.js (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.97abdc47ac3699c01fa5.bundle.js (main) 5.27 kB {3} [initial] [rendered]
chunk    {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 69 bytes {4} [initial] [rendered]
chunk    {3} vendor.0a8aa978ae08e1954b1c.bundle.js (vendor) 1.89 MB [initial] [rendered]
chunk    {4} inline.3da3f5efaa0601772495.bundle.js (inline) 0 bytes [entry] [rendered]

5. Question

Codes in both machines are the same! Just a git clone command line is used to get the code. So, what is the difference that make compilation with AOT working on a machine and failing in another machine???

Thanks,,,

[mappedinn]

Solution is here

[russelltrafford]

For other's reading this and looking for fixes, to help narrow it down, can you confirm the versions of angular CLI&enhanced-resolve` are the same on both? If not, solution is above as you commented. Otherwise, it could be another issue?

[mappedinn]

@russelltrafford, this is my package.json:

{
  "name": "angular4-on-nginx-with-docker",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.3",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

If you want a complete example please refer to this repo angular4-on-nginx-with-docker

[moshejs]

Enhance-resolve fixed this issue for me cli 1.3.0-rc3

[mappedinn]

The use of "@angular/cli": "1.2.6" fixes also the problem.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}