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

[valsorym]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

ng

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.1
node: 8.2.1
os: darwin x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.1
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

node

$ node --version
v8.2.1

npm

$ npm --version
5.3.0

OS

macOS El Capitan
Darwin 15.5.0 Darwin Kernel Version 15.5.0

Repro steps.

Create test project

$ ng new blog
$ cd blog/
$ ng server

Open http://localhost:4200 in browser - all ok!

Ctrl+C - stop server.

Create localization

$ npm install ngx-i18nsupport --save
$ touch xliffmerge.json
$ vim xliffmerge.json

{
  "xliffmergeOptions": {
    "srcDir": "src/i18n",
    "genDir": "src/i18n",
    "defaultLanguage": "en",
    "languages": ["en", "uk"]
  }
}

$ vim src/app/app.component.html

Replace

<h2>Here are some links to help you start: </h2>  

on

<h2 i18n>Here are some links to help you start: </h2>  

And create localization

$ ng xi18n --output-path src/i18n --locale en
$ xliffmerge --profile xliffmerge.json

All ok, and I edit src/i18n/messages.uk.xlf

<target state="new">Here are some links to help you start: </target>

to

<target state="translated">Ось деякі посилання, що допоможуть Вам розпочати: </target>

The main.ts is standard

$ cat src/main.ts
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);

Bug here

And run serve again

$ ng server --aot --locale=uk --i18n-format xlf --i18n-file src/i18n/messages.uk.xlf
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/path/to/blog/src'
 @ ./src/main.ts 3:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Add --env=prod or --prod

Does not solve the problem

$ ng server --aot --locale=uk --i18n-format xlf --i18n-file src/i18n/messages.uk.xlf --env=prod
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 3af33f9cb8c46fdd2a70                                                              
Time: 4745ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 178 kB {4} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 1.1 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.15 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/path/to/blog/src'
 @ ./src/main.ts 3:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

What solution?

Sources

Angular-CLI Internationalization (i18n)

Angular Internationalization (i18n)

Ahead-of-Time Compilation

Issues 4551

Issues 5596

[valsorym]

Solved!
Need to use the latest version of @angular/cli

Update @angular/cli

$ npm uninstall -g angular-cli
$ npm uninstall --save-dev angular-cli
$ rm -rf node_modules dist
$ npm cache clean
$ npm install -g @angular/cli@latest
$ npm install --save-dev @angular/cli@latest
$ npm install 

Ng version

$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.7
node: 8.2.1
os: darwin x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.7
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Run

$ng serve --aot --locale=uk --i18n-format xlf --i18n-file src/i18n/messages.uk.xlf
...
webpack: Compiled successfully.

All starts normal

[m98]

I had the same problem, I used the Manually removing residual Angular CLI guide, but it did not work for me, in my case, it was because I used sudo when I wanted to install Angular CLI globally, and for uninstalling it I needed to use sudo again:

sudo npm uninstall -g @angular/cli

[finalxcode]

sudo npm uninstall -g @angular/cli
use @angular/cli@1.2.6 solved my 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.}