@microsoft-mgt components do not compile with Angular 14

[elninoisback]

When you follow the guide on getting the @microsoft/mgt working with Angular 14, it gives compile errors.

Angular version: 14 "@microsoft/mgt": "^2.4.0"

As soon as you add the global provider Msal2Provider, the compiler spits out errors related to @microsoft/fast-foundation peer dependancy.

Error: node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: c3952371-7287-cba7-5c09-e437c09a0a14
• Version Independent ID: d29c803a-c1f5-19fe-f821-5a447f1c3e04
• Content: Use the Microsoft Graph Toolkit with Angular - Microsoft Graph
• Content Source: concepts/toolkit/get-started/use-toolkit-with-angular.md
• Product: non-product-specific
• Technology: microsoft-graph
• GitHub Login: @sebastienlevert
• Microsoft Alias: MSGraphDocsVteam

[github-actions[bot]]

This issue has been assigned to you, @sebastienlevert. You are listed as the author for the document associated with this issue. If this is not correct, please take the following actions.

• Assign this issue to the correct author
• Create a pull request to update the author field in the YAML front-matter of this topic

[ghost]

Hello elninoisback, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

Thanks @elninoisback for this bug report. I moved it from our docs repo to our product repo so we have a better tracking.

Can you share a repro of this issue? I'd love to have a look! Thanks!

[gavinbarron]

@sebastienlevert I ran into this yesterday while looking at upgrading the Angular sample app, The an example of the specific compiler issue I saw is:

Error: node_modules/@microsoft/fast-foundation/dist/fast-foundation.d.ts:4104:26 - error TS2320: Interface 'Listbox' cannot simultaneously extend types 'HTMLElement & FASTElement' and 'DelegatesARIAListbox'.
  Named property 'ariaExpanded' of types 'HTMLElement & FASTElement' and 'DelegatesARIAListbox' are not identical.

It's due to the version of TypeScript incrementing from 4.3.5 to 4.4.4 and having stricter type inference. Likely a later version of @microsoft/fast-foundation will resolve this issue.

[gavinbarron]

@microsoft/fast-foundation is a transitive dependency from @fluentui/web-components

@microsoft/[email protected] moved to [email protected] @fluentui/[email protected] is the lowest version which will bump the transitive dependency high enough to resolve this issue. Likely this is a candidate for our v3.0.0 milestone

[elninoisback]

To workaround this, I had to add "skipLibCheck": true to the tsconfig.json file.

[gavinbarron]

Closed