Enable the Toolkit to work with Angular 17 SSR

[web265p3]

Proposal: Add functionality for SSR in Angular Apps

Description

Currently any reference to "Providers" from @microsoft/mgt causes an error on the server side that states that "document is not defined" This happens even when the developer checks if the current execution context is the client (and not the server)

  if(this.appGlobals.isClient) {
     Providers.globalProvider = new Msal2Provider({
        clientId: appCon.clientId,
        authority: appCon.authority,
     });
  }

Rationale

Angular SSR becomes more and more important in the community and the Graph Toolkit should support also those kinds of apps.

[sebastienlevert]

Thanks for your interest in MGT and for the suggestion! It's something we need to get to and is a big topic because of all the dependencies this requires (Fluent UI Web Components, Lit, etc.). That being said, this is something that will get more and more traction and we should absolutely start investigating. There is no current spike planned and if you are willing to help us, we'd love to explore the options with you! For now we'll put this in our backlog but there is nothing planned in that space.

[web265p3]

okay thanks,

So rendering on the server side will not be possible in the next time. However, for many people it might be enough to be able to check inside the Angular application weather the current context is client or server and only execute if its the client.

Some condition similar like this could already help in your style-helper.ts:

if(document) {
   document.head.appendChild(fabricFont);
   const themeStyle = document.createElement('style');
   themeStyle.innerHTML = styles.toString();
   document.head.appendChild(themeStyle);
}

That might be a low hanging fruit to fix something.

[sebastienlevert]

Adding @gavinbarron for visibility. The thing I'm scared of is the amount of document reference we have in the Toolkit at this point and the underlying frameworks (Lit, Fluent) we use that takes a huge dependency on it also. I agree this could be a big win. But I'm afraid this is an heavy capability that could easily be overlooked as a "simple" one. Is this something you'd love helping us with?

[gavinbarron]

My initial thinking is that the specific error around setting the globalProvider to the Msal2Provider is likely from our dependency on @azure/msal-browser.

Yes, there are a lot of document references in our own code too, some of them rightly so, as in mgt-flyout, as they are providing client side layout help.

SSR is an emerging area for web components with experimental support starting to be available. We currently use lit who have an experimental library https://lit.dev/docs/ssr/overview/ but it doesn't yet support async component work.

Microsoft FAST web component also don't yet have support for SSR https://github.com/microsoft/fast/issues/5182

Then there's the auth piece. AFAIK MSAL does not yet have a good story for proper SSR of SPA https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5038#issuecomment-1195595150

All this to say, as much as I'd love for us to have a great SSR story, we really need for the dependencies upon which we're built to have a great SSR story to enable this.

[gavinbarron]

I'm going to close this issue in favor of the original SSR issue to avoid having open duplicates