Angular-cli: Yarn creates incompatible @ngtools/webpack/node_modules (AppModule is not an NgModule)

[nhnb]

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

There have been a number of reports about Angular 4 working with npm. But failing with the following error message on "ng build" when yarn has been used:
ERROR in AppModule is not an NgModule

Among the many differences in node_modules between npm and yarn, I traced the issue down to the folder node_modules/@ngtools/webpack/node_modules. It does not exist on npm install, but yarn creates it with loader-utils (version 1.1.0) and typescript (version 2.2.2).

Deleting this folder fixes the "AppModule is not an NgModule" error and the project can be compiled successfully.

Please note: The typescript version in that folder is 2.2.2. The instructions at Updating to 4.0.0 suggest to use typescript@latest, which results in ^2.3.3 in package.json

Versions.

• @angular/cli: 1.0.4
• node: 6.9.5 os: linux x64
• @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router and
  @angular/compiler-cli: 4.1.3
• typescript: 2.3.3
• npm: 3.10.10
• yarn: 0.19.1

The log given by the failure.

ng build --prod --aot
Hash: f51dd13e0d7162822443                                                               
Time: 20451ms
chunk    {0} styles.96c0a658294179b6d7fc.bundle.css (styles) 281 bytes {3} [initial] [rendered]
chunk    {1} main.117d403616e3c6b9015d.bundle.js (main) 1.39 kB {2} [initial] [rendered]
chunk    {2} vendor.c85a90b3d399a6fd167d.bundle.js (vendor) 1.04 MB [initial] [rendered]
chunk    {3} inline.d05467de75134d5563b5.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in AppModule is not an NgModule

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/tmp/hisngyarn/src'
 @ ./src/main.ts 5:0-74
 @ multi ./src/main.ts

Mention any other details that might be useful.

package.json.txt

[nhnb]

Changing package.json to the exact same typescript version 2.2.2 prevents the error as well.

[clydin]

My guess is your yarn lock file is working against you. It probably linked TS 2.2.2 to @ngtools/webpack before the upgrade attempt and is trying to give it the same version; which is technically acceptable from a package management perspective.

[nhnb]

@clydin the issue is reproducible after deleting yarn.lock and node_modules folders.

[clydin]

Can you provide your package.json?

[nhnb]

I have attached it as downloadable file to the initial comment (please note the .txt extensions which needs to be removed).

[clydin]

Sorry. Didn't see it there.

1.0 doesn't support TS 2.3. You'll need to either wait for 1.1 (should be soon) or use the release candidate (1.1.0-rc.0).

[jdhines]

Any news on this in 2018? I'm running into this issue when deploying with Jenkins, which does a yarn install and then ng build. Works locally, and can build with NPM, but that takes about 10 times as long to build as Yarn does, so I'd rather use yarn.

[mgechev]

Are you still able to reproduce this issue with the latest CLI?

[nhnb]

The issue does not occur with a recent version of Angular (CLI).

It was caused by the update instructions to Angular 4 suggesting to use typescript@latest, which at some point in time pointed to a version new than the one supported by Angular 4.

[mgechev]

Thanks for the response!

[angular-automatic-lock-bot[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._}