Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support TypeScript 3.7 #16071

Closed
a1russell opened this issue Nov 5, 2019 · 31 comments
Closed

Support TypeScript 3.7 #16071

a1russell opened this issue Nov 5, 2019 · 31 comments
Labels
area: @angular/cli feature Issue that requests a new feature
Milestone

Comments

@a1russell
Copy link

🚀 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 alan-agius4 added state: blocked comp: core & compiler feature Issue that requests a new feature labels Nov 5, 2019
@ngbot ngbot bot added this to the Backlog milestone Nov 5, 2019
@alan-agius4
Copy link
Collaborator

Blocked until Angular FW supports TS 3.7

@alan-agius4
Copy link
Collaborator

Related to angular/angular#33596 and angular/angular#32962

@filipesilva
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

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.

@mattrcullum
Copy link

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
Copy link

xiaoxiangmoe commented Nov 13, 2019

@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
Copy link
Contributor

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
Copy link

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

I can confirm it works.

@filipesilva
Copy link
Contributor

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
Copy link

@MatthiasKunnen I copy code from example-8

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

@xiaoxiangmoe
Copy link

xiaoxiangmoe commented Nov 13, 2019

@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
Copy link
Member

clydin commented Nov 13, 2019

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
Copy link
Author

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
Copy link

rexebin commented Nov 19, 2019

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
Copy link

@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
Copy link

MatthiasKunnen commented Dec 19, 2019 via email

@rexebin
Copy link

rexebin commented Dec 20, 2019

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

@Fluqz
Copy link

Fluqz commented Jan 16, 2020

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
Copy link
Contributor

@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: DefinitelyTyped/DefinitelyTyped#33672 and DefinitelyTyped/DefinitelyTyped#40995. It suggests the problem is related to the @types/webgl2 package.

@eternalmatt
Copy link

@Fluqz
Copy link

Fluqz commented Jan 17, 2020

@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
Copy link

@Fluqz Can you give me a minimal reproducible demo?

@filipesilva
Copy link
Contributor

@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
Copy link

Fluqz commented Jan 17, 2020

@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
Copy link
Contributor

@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
Copy link

Fluqz commented Jan 17, 2020

@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
Copy link

Fluqz commented Jan 17, 2020

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
Copy link
Contributor

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
Copy link
Contributor

filipesilva commented Jan 22, 2020

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 22, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: @angular/cli feature Issue that requests a new feature
Projects
None yet
Development

No branches or pull requests