Angular Universal SSR med MSAL Angular

Angular Universal stöds minimalt i @azure/msal-angular. Eftersom @azure/msal-angular är ett wrapper-bibliotek för @azure/msal-browser, som använder globala objekt som bara finns i webbläsaren, till exempel window och location, är inte alla funktioner i @azure/msal-angular tillgängliga vid användning av Angular Universal. Även om inloggning och hämtning av token inte stöds på serversidan kan Angular Universal användas tillsammans med @azure/msal-angular utan att din app slutar fungera.

Se instruktionerna i Angular-dokumentationen om hur du installerar Angular Universal i en befintlig applikation, samt för mer information om globala objekt som endast finns i webbläsaren.

Om du vill använda @azure/msal-angular med Angular Universal gör du följande justeringar:

1. Ta bort referenser till objekt som endast finns i webbläsare. Vårt Exempel på Angular-moduler har kommentarer bredvid relevanta rader som ska tas bort för att återge serversidan. Om du tar bort dessa rader påverkas inte exempelappen om du använder Angular Universal.

   this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
   

2. Du kan också lägga till kontroller före alla rader som endast använder globala objekt i webbläsaren.

   if (typeof window !== "undefined") {
       this.isIframe = window !== window.parent && !window.opener;
   }
   

3. Samma kontroll bör läggas till i alla HTTP-anrop som görs av din app, eftersom MsalInterceptor för närvarande endast använder objekt som är tillgängliga i webbläsaren. Detta kommer att åtgärdas i en framtida korrigering. Se exemplet nedan i profile.component.ts från vår äldre MSAL Angular v2 Angular 11-exempelapp:

   export class ProfileComponent implements OnInit {
   profile!: ProfileType;
   
       constructor(
           private http: HttpClient
       ) { }
   
       ngOnInit() {
           // This check is added to ensure HTTP calls are made client-side
           if (typeof window !== "undefined") {
               this.getProfile();
           }
       }
   
       getProfile() {
           this.http.get(GRAPH_ENDPOINT)
               .subscribe(profile => {
                   this.profile = profile;
               });
       }
   }
   

4. Kontrollera att appen inte använder hash-routning. Standarddirigeringsstrategin för den äldre MSAL Angular v2 Angular 11-exempelappen är hash-routning, så se useHash till att false är inställd på i app-routing.module.ts:

   @NgModule({
       imports: [RouterModule.forRoot(routes, {
           useHash: false,
           initialNavigation: 'enabled'
       })],
       exports: [RouterModule]
   })
   export class AppRoutingModule { }