FAST with Angular throws multiple errors #6602
Comments
|
I also just ran into this issue while trying to update our Angular sample extension for the Webview UI Toolkit for VS Code. I'm still unsure what the cause of this problem is (i.e. what changed in Angular v15 to cause this bug) but was able to find a solution for the problem by manually updating the I've made a small reproduction of the issue for validation/convenience. To summarize, however: Inside I got the same error messages as the screenshot above talking about how type 'T' is not assignable to the various types. At the bottom of the screenshot (and partially cut off) the TS compiler actually suggests the correct solution which is to extend type 'T' of the The working solution I came up with is to replace lines 2252, 2254, and 2256 with the following: declare function create<T extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null>(nameOrConfig: string): CSSDesignToken<T>;
declare function create<T extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null>(nameOrConfig: Omit<DesignTokenConfiguration, "cssCustomPropertyName"> | (DesignTokenConfiguration & Record<"cssCustomPropertyName", string>)): CSSDesignToken<T>;
declare function create<T extends string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null>(nameOrConfig: DesignTokenConfiguration & Record<"cssCustomPropertyName", null>): DesignToken<T>;Obviously, manually updating the fast-foundation type declaration file inside node_modules is an unsustainable solution, so any work that can be done to update the generated type declarations within FAST would be greatly appreciated! (Or for anyone who might have more insight into what changed about Angular v15 than I, maybe there is a way to change the configurations on the Angular side to make the current fast foundation type declaration file work???). |
|
What version of TS does this repro with? |
|
~4.8.2 (and the old angular sample used 4.1.3) |
I'm pretty sure this is the culprit. TypeScript's versioning doesn't strictly follow semver and types are subject to breaking in between minor versions. I have a feeling that some version prior to v4.8.2 is incompatible with our current implementation somewhere. This is a tricky scenario as updating is likely to trigger breaking changes in folks who have not yet updated their TS versions. In the past we've held that we're okay if typings need to break in minor versions but we try to avoid it. I'll mark this for follow-up but I have a feeling that if you downgraded or force-resolved TS to something like 4.3.5 it would either "work" or break with other errors related to Angular's package. |
|
Cool, that makes sense and is totally reasonable imo. I'll see if I can force-resolve TS to a previous version, but if that doesn't work I have the flexibility to downgrade and will just keep an eye on this issue in the long term Thanks! |
Typescript: 4.8.2 |
|
Errors: Error: node_modules/@microsoft/fast-components/node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:66 - error TS2344: Type 'T' does not satisfy the constraint 'string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null'. |
|
Nothing works as per the documentation. I downgraded TS version to 4.3.5 and Angular 15+ errored me saying that it needs >4.8 TS version. |
If you’d like to put together a repro on stackblitz I would be happy to confirm - my assumption is a dependency issue. My asssumption is Angular 15+ expects TS > 4.8. My assumption is that there are breaking changes we need to address in 4.8. I don’t think this is a docs issue, I think it’s that TS makes breaking changes in minor versions and Angular is pegged at a higher version. Happy to look into upgrading but it may require breaks to types. |
|
Following the documentation and running it locally with angular 15 will easily reproduce the issue. |
|
Same for me. |
|
OP: You may have to pin your dependency at TS 4.7... |
|
Hello! Are there any plans to fix this issue? I do not see it in the roadmap, and it is preventing us from using the newer Angular versions.. Thanks! |
|
Well, amateur wc-ist here but I have been looking into this and can update this thread on my journey :) |
|
Hi |
|
There is PR #6821 which should fix the issue. Angular 15 can be used with TypeScript 4.9 and the SkipLibCheck option as a temporary workaround. |
|
This issue looks a little outdated, we are in process to launch v2 of |
I'm following the steps mentioned in the docs - https://www.fast.design/docs/integrations/angular/
I encounter errors like -
Error: node_modules/@microsoft/fast-components/node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:66 - error TS2344: Type 'T' does not satisfy the constraint 'string | number | boolean | symbol | any[] | Uint8Array | ({ createCSS?(): string; } & Record<PropertyKey, any>) | null'.
Type 'T' is not assignable to type '{ createCSS?(): string; } & Record<PropertyKey, any>'.
Type 'T' is not assignable to type '{ createCSS?(): string; }'.
2252 declare function create(nameOrConfig: string): CSSDesignToken;
~ node_modules/@microsoft/fast-components/node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:2252:25
Refer to the image below
Am I missing something?
The text was updated successfully, but these errors were encountered: