yarn fails to handle angular-cli 1.2.4 dependencies correctly

[rightisleft]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.4
node: 6.11.1
os: linux x64
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1

Repro steps.

package.json

...
  "private": true,
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",
    "@types/tinycolor": "^1.1.27",
    "angular2-loaders-css": "1.0.5",
    "cerialize": "0.1.13",
    "core-js": "^2.4.1",
    "msgpack-lite": "^0.1.26",
    "ng2-charts": "^1.6.0",
    "ng2-page-scroll": "^4.0.0-beta.3",
    "ng2-select": "^1.2.0",
    "ng2-toasty": "4.0.0",
    "puse-icons-feather": "^1.1.0",
    "reflect-metadata": "0.1.9",
    "rxjs": "^5.1.0",
    "tinycolor2": "^1.4.1",
    "ts-helpers": "1.1.1",
    "typeorm": "0.0.9",
    "typescript": "^2.2.0",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.4",
    "@angular/compiler-cli": "^4.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.42",
    "bootstrap": "4.0.0-alpha.6",
    "codelyzer": "~2.0.0-beta.1",
    "font-awesome": "4.7.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-remap-istanbul": "0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "2.1.0",
    "tslint": "4.3.0"
  }
}

$ yarn list enhanced-resolve                                                                                                                                                                                                                                                           yarn list v0.24.6
└─ enhanced-resolve@3.3.0

`$ng build --prod `

The log given by the failure.

[root@4bc7c5f8560c PiensoWeb]# ng build --prod
Hash: 381eeb7f2d84ab2dfd29
Time: 19189ms
chunk    {0} styles.ff557a508943300e7e5d.bundle.css (styles) 440 bytes {4} [initial] [rendered]
chunk    {1} main.c242e4a20e66c8a77083.bundle.js (main) 1.76 kB {3} [initial] [rendered]
chunk    {2} scripts.2264c5f19ef83b4b557f.bundle.js (scripts) 152 kB {4} [initial] [rendered]
chunk    {3} vendor.89b6466bbf579cad9ebd.bundle.js (vendor) 1.08 MB [initial] [rendered]
chunk    {4} inline.33937348cd092eeba28e.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 '/godata/pipelines/PiensoWeb/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

Desired functionality.

When i run this on OS X it works fine.

$ng -v                                                                                                                                                                                                                                                                                        
@angular/cli: 1.2.4
node: 6.11.0
os: darwin x64
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1

$ng build --prod                                                                                                                                                                                                                                                                          
Hash: 3b14b67673dd8ca9ba26
Time: 41531ms
chunk    {0} main.8683891522fecb4ec38d.bundle.js (main) 591 kB {3} [initial] [rendered]
chunk    {1} styles.ff557a508943300e7e5d.bundle.css (styles) 440 bytes {4} [initial] [rendered]
chunk    {2} scripts.9a8757e99ae6e1dcb456.bundle.js (scripts) 152 kB {4} [initial] [rendered]
chunk    {3} vendor.c61629386e8e347207a2.bundle.js (vendor) 4.9 MB [initial] [rendered]
chunk    {4} inline.25beaa585d007a77a7d7.bundle.js (inline) 0 bytes [entry] [rendered]

Mention any other details that might be useful.

Yarn packages && node_modules deleted and reinstall on each linux build

[Fayde]

I had this problem this morning on windows, updating my node version to latest and the cli to 1.2.4 solved the issue, though

[rightisleft]

Seems like this is definitely related to enhanced-resolve

Builds that work do not have:

/Users/jmurphy/projects/ubq/web/node_modules/@ngtools/webpack/node_modules/enhanced-resolve

[rightisleft]

Weird - today im seeing the following on the failed builds

[me@ae7b3ab2f8b7]# yarn list enhanced-resolve @angular/cli
yarn list v0.27.5
├─ @angular/cli@1.2.4
├─ enhanced-resolve@3.3.0
└─ webpack@2.4.1
   └─ enhanced-resolve@3.4.1

[rightisleft]

This does seem to be isolated to yarn.

Running the following works:

$ rm -rf node_modules
$ npm install
$ npm run buildprod

---

Running the following fails:

$ rm -rf node_modules
$ yarn install
$ npm run buildprod

---

The bug here is to make this work with yarn

[pschmoek]

yarn resolves 2 versions of enhanced-resolve.
Angular CLI uses webpack which has dependency enhanced-resolve "^3.3.0". This leads to 2 entries in yarn.lock - resolving 2 different versions of enhanced-resolve. One given to Angular CLI - the correct one 3.3.0 - and one given to webpack 3.4.1 - the faulty one.
Just run yarn and change yarn.lock by hand afterwards.

- enhanced-resolve@3.3.0:
-   version "3.3.0"
-   resolved "YARN_REGISTRY_OR_YOUR_PRIVATE"
-   dependencies:
-     graceful-fs "^4.1.2"
-     memory-fs "^0.4.0"
-     object-assign "^4.0.1"
-     tapable "^0.2.5"

- enhanced-resolve@^3.3.0:
-   version "3.4.1"
-   resolved "YARN_REGISTRY_OR_YOUR_PRIVATE"
-   dependencies:
-     graceful-fs "^4.1.2"
-     memory-fs "^0.4.0"
-     object-assign "^4.0.1"
-     tapable "^0.2.7"

+ enhanced-resolve@3.3.0, enhanced-resolve@^3.3.0:
+   version "3.3.0"
+   resolved "YARN_REGISTRY_OR_YOUR_PRIVATE"
+   dependencies:
+     graceful-fs "^4.1.2"
+     memory-fs "^0.4.0"
+     object-assign "^4.0.1"
+     tapable "^0.2.5"

[flauc]

It looks like when ever I run yarn again the yarn.lock file gets rebuild. Is there a way to make this stick?

[ankeshdave]

@flauc did you try yarn --freeze-lock-file after modifying yarn.lock?

[pschmoek]

yarn only modifies yarn.lock if you add or upgrade a dependency. Running yarn does not change the yarn.lock - that is the point of having a lock file. So the fix only stops working if you upgrade @angular/cli or add webpack, etc.

[flauc]

It looks like only doing this prevents the yarn.lock file from being recreated:

yarn install --pure-lockfile

[markmaynard]

I was seeing the similar issues with enhanced-resolve yesterday with npm. It looks like the ^ dep on enhanced-resolve caused ngtools/webpack to change locally from enhanced-resolve@3.3.0 -> enhanced-resolve@3.4.1. There must be a breaking change in enhanced-resolve somewhere.

[orestes]

The lockfile changes for me too if I run yarn install. It shouldn't, but it does...

[zsparal]

@pschmoek @flauc @orestes Yarn can regenerate the lockfile on yarn install if it

1. finds something in the package.json that's not in the lockfile
2. Cannot resolve something according to the existing yarn.lock file

I came to the same conclusion as @pschmoek regarding the workaround but you need to be mindful about how you modify the yarn.lock file. You should have 2 lines starting with enhanced-resolve:

enhanced-resolve@3.3.0:
enhanced-resolve@^3.x.x:

It's important that you don't change the version in the second one when merging the two lines:

enhanced-resolve@3.3.0, enhanced-resolve@^3.x.x:

Yarn should not regenerate your lockfile after these modifications.

Edit: just as an example: @pschmoek's diff uses ^3.3.0 but for me, a freshly generated yarn.lock contains ^3.0.0. If I were to copy-paste the workaround from here my lockfile would also change on yarn install.