angular-cli compiles project using TypeScript 2.5.x, irrespective of TS version in package.json

[codethief]

Bug Report or Feature Request (mark with an x)

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

Versions.

Globally installed:
@angular/cli: 1.4.9
node: 6.11.2
yarn: 1.2.1
os: linux x64 (Ubuntu 17.04)

node_modules of my project:
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Repro steps.

1. Create a new Angular project using $ ng new my-project.
2. Add any code that does not compile with TypeScript 2.5 but compiles with TypeScript 2.3 to src/app/app.component.ts (see What's new in TypeScript for inspiration), e.g.:

interface Options {
    data?: string;
    timeout?: number;
    maxRetries?: number;
}

function sendMessage(options: Options) {
    // ...
}

const opts = {
    payload: "hello world!",
    retryOnFail: true,
}

// Error!
sendMessage(opts);
// No overlap between the type of 'opts' and 'Options' itself.
// Maybe we meant to use 'data'/'maxRetries' instead of 'payload'/'retryOnFail'.

3. Run $ ng serve or $ ng build --aot

The log given by the failure.

In the above setup, running $ ng serve or $ ng build --aot fails with the following error message:

ERROR in /home/simon/tech/tests/angular-deptest2/src/app/app.component.ts (19,13): Type '{ payload: string; retryOnFail: boolean; }' has no properties in common with type 'Options'.

This means that the code is getting compiled with at least TypeScript >2.4, instead of the expected version 2.3.4 (as per my project's package.json – which angular-cli generated).

Desired functionality.

The code should compile (JIT and AOT) as my project's package.json lists "typescript": "~2.3.3" as a dependency.

Mention any other details that might be useful.

yarn link lists the following dependencies for angular-cli:

yarn list v1.2.1
…
├─ @angular/cli@1.4.9
…
│  ├─ typescript@>=2.0.0 <2.6.0
│  ├─ typescript@2.5.3
…
├─ typescript@2.3.4

and, indeed:

$ cat node_modules/@angular/cli/node_modules/typescript/package.json | grep version
    "version": "2.5.3",

confirming that TypeScript 2.5.3 was installed (which is probably because of angular-cli's chalk dependency which depends precisely on TypeScript 2.5.3 or higher). Now, I suspect that @ngtools/webpack – which angular-cli uses for compiling – will simply take its sibling TypeScript node module for compilation. So since it's also being installed to node_modules/@angular/cli/node_modules/, it will use the TypeScript version in node_modules/@angular/cli/node_modules/typescript (i.e. 2.5.3), not node_modules/typescript (which is v2.3.4).

Temporary workaround.

Add @ngtools/webpack as a dev dependency to your Angular project's package.json. Afterwards remove the node_modules folder and the yarn.lock file and resolve all dependencies from scratch using $ yarn install. @ngtools/webpack will then be installed to node_modules/@ngtools/webpack and should thus find the TypeScript version in node_modules/typescript.

[Splaktar]

That workaround is giving me errors:

ERROR in ./src/main.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:450:19)
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./src/polyfills.ts
Module build failed: Error: AotPlugin was detected but it was an instance of the wrong class.
This likely means you have several @ngtools/webpack packages installed. You can check this with `npm ls @ngtools/webpack`, and then remove the extra copies.
    at Object.ngcLoader (/Users/splaktar/Git/tf/webapp/node_modules/@ngtools/webpack/src/loader.js:450:19)
 @ multi ./src/polyfills.ts

[devoto13]

This is probably a duplicate of #8107. Or the root cause is the same at least.

IMO The proper workaround is to edit yarn.lock and ensure that all 3 typescript version specifications are resolved into same version (desired one). Note that it will likely break again next time you update dependencies.

Should be something like this, note 3 versions in the same resolution record. And there should be no other resolution records for typescript in the yarn.lock.

typescript@2.4.2, "typescript@>=2.0.0 <2.5.0", typescript@^2.3.3:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.4.2.tgz#f8395f85d459276067c988aa41837a8f82870844"

Then rm -rf node_modules and yarn install.

I would also recommend to not use global ng command for running any commands except ng new. You can use yarn ng <whatever> to ensure local CLI installation is used.

[codethief]

@Splaktar After updating your package.json, did you remove node_modules and yarn.lock and install all dependencies from scratch using $ yarn install? (I should probably add this to the above workaround instructions. EDIT: Done)

[codethief]

@devoto13 Thanks for your response! I did search for existing issues but I guess I wasn't using the right keywords…

Regarding the question of a "proper" work-around: I don't like adding addditional dependencies, either, but editing yarn.lock definitely feels… dirtier. :)

[clydin]

Alternatively, you can use npm which doesn’t exhibit the problem.

[devoto13]

@codethief Maybe, but it fixes exactly the root cause of the problem. And this change is not something inherently incorrect. Yarn just can't de-duplicate some version specifications. So you sort of helping it to do this de-duplication :)

@clydin Heh, NPM brings so many problems instead... But it's definitely an option.

[karptonite]

@codethief I tried your workaround, including removing yarn.lock and node_modules before doing a fresh install with yarn install. I got the same error that @Splaktar reported.

[Splaktar]

@codethief I'm seeing this on npm 3.10.10. It doesn't appear to be yarn specific as identified here.

@clydin which version of NPM works for you?

[codethief]

@karptonite @Splaktar I'm only guessing here but I suppose this is another de-duplicating issue, in this case because yarn (or npm) still downloads a separate copy of @ngtools/webpack for @angular/cli even though there already is one in your project's node_modules folder. I'm really at a loss as to why it's working for me, though…

[filipesilva]

This does sound an awful lot like #8107, but the mention of chalk might make things different since it was recently updated (fd82e18).

@codethief what version of chalk are finding in your dependencies?

[filipesilva]

I don't see typescript as a dependency of chalk in any of these:

• 2.2.0: https://unpkg.com/chalk@2.2.0/package.json
• 2.2.2: https://unpkg.com/chalk@2.2.1/package.json
• 2.3.0: https://unpkg.com/chalk@2.3.0/package.json

Are you using a linked Angular CLI maybe?