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

Question

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

Answer 1

The use of "enhanced-resolve":"3.3.0" is a solution for an older version of "@angular/cli" such as "1.2.3".

Another solution, use "@angular/cli": "1.2.6"