Angular-cli: Support TypeScript 3.7

[a1russell]

🚀 Feature request

Command (mark with an x)

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

Description

With the release of TypeScript 3.7, I (and I imagine many others) are eager to upgrade to the latest TypeScript version. Features like optional chaining and nullish coalescing are very compelling.

Describe the solution you'd like

Update build_angular to support TypeScript 3.7 (latest release as of this writing supports only 3.6).

[alan-agius4]

Blocked until Angular FW supports TS 3.7

[alan-agius4]

Related to https://github.com/angular/angular/issues/33596 and https://github.com/angular/angular/pull/32962

[filipesilva]

If you're using the framework/CLI RC and Ivy, you might be able to just use TypeScript 3.7 directly. You'll get a peer dependency warning but in all likelihood it'll just work. Ivy is far less sensitive to TypeScript version changed than View Engine. Let me know if you try this and run into problems.

[JensMagnus]

If you're using the framework/CLI RC and Ivy, you might be able to just use TypeScript 3.7 directly. You'll get a peer dependency warning but in all likelihood it'll just work. Ivy is far less sensitive to TypeScript version changed than View Engine. Let me know if you try this and run into problems.

Updating the dependency to 3.7.2 results in the following error:

ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.7.0 but 3.7.2 was found instead.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

I'm using the "nextest" version of Angular (9.0.0-rc.1)

So it does not work. :(

[filipesilva]

Yeah you're right, that error did not appear before when I tested it and I guess that was a bug. To get around it, add the angularCompilerOptions.disableTypeScriptVersionCheck option set to true in tsconfig.json:

{
  // ...
  "angularCompilerOptions": {
    // ...
    "disableTypeScriptVersionCheck": true
  }
}

This way there will be no TS version error.

[cconcise]

I upgraded to 3.7 and followed the advice of @filipesilva to get rid of the Typescript version error mentioned by @JensMagnus. This was enough to get the site compiling. But when I load the site in a browser now I'm getting this error in the console:

ReferenceError: _ import Default is not defined angular

It's hitting the error at the templateUrl line when defining a component.

@Component({ selector: 'my-component', templateUrl: './my-component.html', // Erroring on this line styleUrls: ['./my-component.scss'] })

[xiaoxiangmoe]

@cconcise I add this in my polyfill.ts and it works well with "@angular/cli": "~8.3.18" and "typescript": "~3.7.2"

// @ts-ignore
window.__importDefault = function(mod) {
  return mod && mod.__esModule ? mod : { default: mod };
};

[filipesilva]

Interesting error. I haven't seen it before, and we will have to test for it when adding support for TS 3.7. Thank you for reporting it.

[MatthiasKunnen]

@xiaoxiangmoe, did you write this fix yourself or where is this coming from?

I can confirm it works.

[filipesilva]

I tried using a scss file for my component styles and didn't see the error myself. I am using the CLI and framework RC versions though. That might be why.

[xiaoxiangmoe]

@MatthiasKunnen I copy code from example-8

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
}

[xiaoxiangmoe]

@filipesilva Error in line templateUrl: './my-component.html',instead of scss line.

Step to reproduce:

• use angular-cli 8 create project
• yarn start and it works well
• yarn add ts 3.7
• disableTypeScriptVersionCheck
• yarn start and the error occur in console.

[clydin]

Please note that this should only be attempted when using 9.0 (currently in RC) or higher with the Ivy renderer enabled (the default for 9.0+).

[a1russell]

My initial testing shows that TypeScript 3.7 does, indeed, work once the disableTypeScriptVersionCheck is specified. That leads me to believe that with Ivy, this issue isn't actually blocked by any Angular FW changes.

[rexebin]

Followed steps here, added the polyfill code from @xiaoxiangmoe and disabled Typescript version checking in my NX project with dependencies: angular-cli 8.3.19, angular core 8.2.14, nx 8.7.1. Both Dev and build work fine.

I have been waiting for Optional Chaining for ages and now finally!

[Shubhangi-Priya]

@rexebin have you faced any issues in particular with Angular with the Typescript version check disabled? We are using Angular 8.2.5 and would like to know if there are any side effects. Thanks!

[MatthiasKunnen]

I've been using 3.7.2 since it was out on Angular 8 without problem. Only
the workaround mentioned in the thread was required.

On Thu, Dec 19, 2019, 18:52 Shubhangi-Priya [e-mail]
wrote:

@rexebin https://github.com/rexebin have you faced any issues in
particular with Angular with the Typescript version check disabled? We are
using Angular 8.2.5 and would like to know if there are any side effects.
Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/16071?email_source=notifications&email_token=AEAHNI7EUIMYPPW5FV22GF3QZOYEJA5CNFSM4JJGAV5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHKM3HI#issuecomment-567594397,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AEAHNI53ZUIQ435I3Z76G5TQZOYEJANCNFSM4JJGAV5A
.

[rexebin]

@Shubhangi-Priya My project is not a small one and so far there is no issues or side effects using Typescript 3.7+.

[Fluqz]

Hey im having a problem. I using Angular 8.2.14 with ThreeJs r112. Now ThreeJs needs Typescript 3.7.x, but angular will not support it and i cannot downgrade ThreeJs. So im not able to make a build.
I tried everything I found and in every version. I updated Angular to 9.0.0.rc.9 and included the polyfill and disableTypeScriptVersionCheck. I played with different tsc versions and threejs versions and angular versions. The full spectrum, but its not working..

Here is another thread where I asked https://discourse.threejs.org/t/using-vr-in-r110-or-angular-8-r112-not-working/12155/3

[filipesilva]

@Fluqz you should be able to use TS 3.7.4 with Angular 9.0.0.rc.9.

I'm not familiar with ThreeJs so it's hard to talk about it. I took a look at the thread you linked and saw you mentioned this error:

Failed to compile.

node_modules/typescript/lib/lib.dom.d.ts:16482:11 - error TS2430: Interface ‘WebGL2RenderingContext’ incorrectly extends interface ‘WebGL2RenderingContextBase’.
Types of property ‘clearBufferfv’ are incompatible.
Type ‘(buffer: number, drawbuffer: number, values: ArrayLike | Float32Array, srcOffset?: number) => void’ is not assignable to type ‘{ (buffer: number, drawbuffer: number, values: Float32List, srcOffset?: number): void; (buffer: number, drawbuffer: number, values: Iterable, srcOffset?: number): void; }’.
Types of parameters ‘values’ and ‘values’ are incompatible.
Type ‘Iterable’ is not assignable to type ‘ArrayLike | Float32Array’.
Type ‘Iterable’ is missing the following properties from type ‘Float32Array’: BYTES_PER_ELEMENT, buffer, byteLength, byteOffset, and 25 more.

16482 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
~~~~~~~~~~~~~~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:16482:11 - error TS2430: Interface ‘WebGL2RenderingContext’ incorrectly extends interface ‘WebGL2RenderingContextOverloads’.
Types of property ‘uniform1fv’ are incompatible.
Type ‘(location: WebGLUniformLocation, data: ArrayLike | Float32Array, srcOffset?: number, srcLength?: number) => void’ is not assignable to type ‘{ (location: WebGLUniformLocation, data: Float32List, srcOffset?: number, srcLength?: number): void; (location: WebGLUniformLocation, data: Iterable<…>, srcOffset?: number, srcLength?: number): void; }’.
Types of parameters ‘data’ and ‘data’ are incompatible.
Type ‘Iterable’ is not assignable to type ‘ArrayLike | Float32Array’.
Type ‘Iterable’ is not assignable to type ‘Float32Array’.

Those errors seem to come from typescripts lib.dom.d.ts. The TS 3.7 page does list some breaking changes in those typings which I guess is related.

Looking over the TS issue tracker I can find issues with a similar messages: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33672 and https://github.com/DefinitelyTyped/DefinitelyTyped/issues/40995. It suggests the problem is related to the @types/webgl2 package.

[eternalmatt]

@angular/cli compatibility is based on commits here: https://github.com/angular/angular-cli/commits/master/packages/schematics/angular/third_party/github.com/Microsoft/TypeScript

[Fluqz]

@filipesilva thanks for your fast answer!
Is there anything I can try with lib.dom.d.ts?
I already deleted the @types/webgl2 package, does not make a change.

I just updated to TSC 3.7.5 but no success.

I also made a completely new Angular project with version 8.2.11. I installed threejs r112 and tried to make a build. It failed! Then I added the polyfill, the disableTypeScriptVersionCheck option and updated to TSC 3.7.5 and "babam" it worked again.

What else can I provide from the non-test project to help identify the cause?

[xiaoxiangmoe]

@Fluqz Can you give me a minimal reproducible demo?

[filipesilva]

@eternalmatt that's not quite right. It's true that we do keep a vendor version of typescript in the Angular CLI repository, but it's used exclusively for schematics. That version is independent from the version that the Angular Framework itself supports. What ends up determining if Angular CLI supports a certain version of TypeScript is mostly testing after the framework adds support, and updating new projects to use the new version.

@Fluqz I don't think you'd need disableTypeScriptVersionCheck now. I guess if you got the minimal repro working, then it's a matter of either adding stuff to it until it breaks, or removing stuff from your real app until it doesn't break. If I had to bet though, it might be some residual stuff in your real app from past experimentations.

[Fluqz]

@xiaoxiangmoe No, I dont know how to reproduce the issue unfortunately.
@filipesilva I just tried to clean my package.json so its almost equal to the test project one. Though both are now on version 8.2.11, only my real app is now getting this error:
ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.7.5 was found instead. I doubt this has to do with other packages, does it?

[filipesilva]

@Fluqz that error only happens if you're not using rc.9 of angular packages. You can find what angular packages you are using by running ng version.

[Fluqz]

@filipesilva but it is actually working with my testproject. I can build with tsc 3.7.5. Both test and real app are at ng version 8.3.23 (in package.json its at 8.2.11)? Anyway im gonna try the same at 9.0.0-rc.9 again

[Fluqz]

I just solved it by cleaning up my package.json & angular.json. Being on Ng 9-rc.9 and tsc 3.7.5. Pretty sure tween.js was the problem. Thanks alot!

[filipesilva]

Glad to hear it's sorted. It's not very hard to end up with weird sets of deps with npm/yarn after a bit of experimentation.

[filipesilva]

Hey all,

Starting with @angular/[email protected] and @angular/[email protected] you should be able to use TypeScript 3.7 with no problems, while 3.6 is also supported. Please let us know if something if you encounter any problems with the TS version.

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