Problems with Angular CLI 6

[binarious]

pnpm version: 2.10.5

Code to reproduce the issue:

npm i -g @angular/cli
ng new test-pnpm --skip-install
cd test-pnpm
pnpm i
ng build --prod

Expected behavior:

Working build.

Actual behavior:

Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in
devDependencies, then delete node_modules and package-lock.json (if you have one) and
run npm install again.

Additional information:

• node -v prints: v10.6.0
• Windows, OS X, or Linux?: macOS 10.13.5

@angular/compiler-cli is defined in the package.json.

[imvasen]

I'd like to add: same behavior with Linux (node v10.6.0). We'll be waiting for a fix. In the mix while I have to stick with npm.

[PaulAGH]

Same behavior on Windows 7 (node v8.11.3).

[ThomasSchoenbeck]

i am running into a similar problem with ng serve.

tried installing typescript globally as some older posts are suggesting. also tried --shamefully-flatten. both did not work.

only solution for me until now is going back to npm install :(.

[Nkmol]

tl;dr: I believe pnpm is not solving the dependencies of dependencies (and probably even n-deeper) in a rightful way. npm showing tslib in the root node folder as it is a dependency of multiple packages, though it is not showing inside the pnpm project.

---

I have ran the clean commands with both npm and pnpm, both have a clean storage/cache.

In the pnpm project

I get the following error when running ng build --prod: Could not find API compiler-cli, function VERSION. This error is related to this try/catch:

let compilerCli = null;
try {
    compilerCli = require('@angular/compiler-cli');
}
catch (_a) {
    // Don't throw an error if the private API does not exist.
    // Instead, the `CompilerCliIsSupported` method should return throw and indicate the
    // plugin cannot be used.
}

Which results in the following output once we output the error it catches:

{ Error: Cannot find module 'tslib'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at /home/sander/Projects/test-pnpm/node_modules/.registry.npmjs.org/@angular/compiler-cli/6.1.3/node_modules/@angular/compiler-cli/index.js:12:19
at Object.defineProperty.value (/home/sander/Projects/test-pnpm/node_modules/.registry.npmjs.org/@angular/compiler-cli/6.1.3/node_modules/@angular/compiler-cli/index.js:3:17)
at Object. (/home/sander/Projects/test-pnpm/node_modules/.registry.npmjs.org/@angular/compiler-cli/6.1.3/node_modules/@angular/compiler-cli/index.js:9:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/home/sander/Projects/test-pnpm/node_modules/.registry.npmjs.org/@ngtools/webpack/6.1.4/webpack@4.9.2/node_modules/@ngtools/webpack/src/ngtools_api.js:43:19)
at Module._compile (module.js:652:30) code: 'MODULE_NOT_FOUND' }

So it seems the tslib package is missing. So I run pnpm ls tslib to make sure it is missing, which it is as it gives no results back.

In npm project

runs fine when running the exact same commands. Now to checking tslib with npm ls tslib gives the following result:

npm-project@0.0.0 /home/user/Projects/npm-project
├─┬ @angular/animations@6.1.3
│ └── tslib@1.9.3
├─┬ @angular/common@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/compiler@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/core@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/forms@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/http@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/platform-browser@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/platform-browser-dynamic@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ @angular/router@6.1.3
│ └── tslib@1.9.3 deduped
├─┬ rxjs@6.2.2
│ └── tslib@1.9.3 deduped
└─┬ tslint@5.9.1
├── tslib@1.9.3 deduped
└─┬ tsutils@2.29.0
└── tslib@1.9.3 deduped

Looking in the package.json of @angular/animations@6.1.3 (as on the npm registry), shows the tslib dependency:

"dependencies": {
    "tslib": "^1.9.0"
},

Conclusion

Following this trail of manually adding this, only gives us the next package error. And the next, and the next, etc.

I believe pnpm is not solving the dependencies of dependencies (and probably even n-deeper) in a rightful way. Though, I have no idea how it does resolve this atm.

[JasonGoemaat]

I'm no expert at package management, but if in the package @ngools/webpack/6.2.5/webpack@4.20.2/node_modules/@ngtools/webpack there is a src/ngtools_api.js file that does this:

compilerCli = require('@angular/compiler-cli');

Shouldn't the package.json for that package have a dependency for @angular/compiler-cli? Maybe some of the tools don't use dependencies assuming they can find the packages because they are installed elsewhere normally?

[binarious]

It's defined as a peerDependency in the package.json.

[seangwright]

@JasonGoemaat

Shouldn't the package.json for that package have a dependency for @angular/compiler-cli? Maybe some of the tools don't use dependencies assuming they can find the packages because they are installed elsewhere normally?

It's listed as a devDependency and a peerDependency since the Angular v7 betas, but before that it wasn't listed at all.

• Included in 7.0.1
  https://github.com/angular/angular-cli/blob/v7.0.1/packages/ngtools/webpack/package.json

• Missing in 6.2.7
  https://github.com/angular/angular-cli/blob/v6.2.7/packages/ngtools/webpack/package.json

[marcelcremer]

I just ran into the same issue with Angular 6. From what I understand in this thread, Angular doesn't have correct dependencies set in their packages?

How comes that NPM resolves those deps, and pnpm doesn't? If the package.json is wrong, is pnpm aiming to behave the same as npm does?

I'd love to provide more infos on this if needed, or try to help otherwise if I can :)

[zkochan]

Sorry that I am not digging into it but after maintaining pnpm for more than 2 years I am sure pnpm works correctly in all cases. Some version of Angular worked with pnpm but then, unfortunately, things went south.

These are the issues that may happen:

1. packages require other packages that are not declared in their package.json. This works with flat node_modules but does not with pnpm's non-flat node_modules (https://medium.com/pnpm/pnpms-strictness-helps-to-avoid-silly-bugs-9a15fb306308)
2. toolings try to reimplement Node's module resolution algorithm but do it incorrectly by preserving symlinks (Node does not preserve symlinks, that is why it works with pnpm's symlinked node_modules)

In most cases these issues are solved when installing a flat node_modules. You can do that with pnpm by setting shamefully-flatten=true in an .npmrc file in the root of your project.

if Angular still doesn't work with shamefully-flatten=true, let me know.

[marcelcremer]

Thank you for your answer. I've checked my repository, and shamefully-flatten makes it better. However, with my cli version, #767 hits me, which is caused by an old dependency from the angular cli.

It looks like there are too many parties involved, that would need to fix things:

• angular would need to fix their dependencies (shamefully-flatten workaround available)
• angular-cli needs to upgrade the webpack-license-plugin (resolving strategy was fixed with Problems with pnpm xz64/license-webpack-plugin#42), which could take a while
• webpack needs to fix their resolval strategy (Problems with pnpm and the way loaders are resolved webpack/webpack#5087 and Frameworks/toolings don't resolve dependencies the way Node does #801)
• webpack loader problems with symlinks (first post pnpm start fails for angular app #1262)
• maybe others...

Now that I think I understand, that most problems come from the outside, I sadly switched back to npm for angular :-/

P.S.: Nevertheless, pnpm saves me about 50% time for every build I make for our nodejs-apps with Gitlab-CI. Just wanted to also give some props and <3 to @zkochan and the pnpm contributors. Thank you guys :-)

[bretonio]

At your guys suggestion I overcame this problem with npm ls tslib — and rxjs in my case — which returned among other data news of the broken dependency and the version to be installed. Easy peasy. Thanks.

[zkochan]

Angular 8 supports pnpm
https://twitter.com/mgechev/status/1098449036351221761