Angular-cli: support of pnpm when installing a new app

[kkoo95]

🚀 Feature request

Command

- [x] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

a new app or library generated with CLI 7.3.1 but installed with pnpm doesn't compile.

$ ng new test-pnpm --skip-install
$ cd test-pnpm
$ pnpm i
$ ng serve

result:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-02-14T21:12:54.636Z
Hash: e8745ed29e7097ee7e23
Time: 15155ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 368 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 9.35 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 262 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 514 bytes [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.56 MB [initial] [rendered]

ERROR in (webpack)/hot/emitter.js
Module not found: Error: Can't resolve 'events' in 'D:\dev\clones\test-pnpm\node_modules\.registry.npmjs.org\webpack\4.29.0\webpack@                                                  4.29.0\node_modules\webpack\hot'
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'postcss-loader' in 'D:\dev\clones\test-pnpm'
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'raw-loader' in 'D:\dev\clones\test-pnpm'
ERROR in multi ./src/styles.css
Module not found: Error: Can't resolve 'style-loader' in 'D:\dev\clones\test-pnpm'
i ｢wdm｣: Failed to compile.

From what i read, it would have to do with how angular is declaring its dependencies in the generated package.json.

Describe alternatives you've considered

There is a workaround within pnpm. One can use the shamefully-flatten install flag so that node_modules are laid out like yarn or npm. But it is a shame to have to do that right ? :).
But this workaround only works for angular application (serve and build), not libraries

[clydin]

A PR to fix the loader resolution will be available shortly. This will enable building to work.
The following error is only occurring with serve actions and will require some additional investigation to solve.

ERROR in (webpack)/hot/emitter.js
Module not found: Error: Can't resolve 'events' in 'D:\dev\clones\test-pnpm\node_modules\.registry.npmjs.org\webpack\4.29.0\webpack@                                                  4.29.0\node_modules\webpack\hot'

[lucas-labs]

I'm having this problem too when trying to use pnpm with angular. Is there any known workaround to solve this error other than shamefully-flatten? Thanks in advance!

[mbinic]

You can just install the missing dependencies (e.g. events), and since it's Webpack that's missing them, you can install to dev dependencies.

[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._}