Angular Universal SSR dengan MSAL Angular

Angular Universal hanya didukung secara minimal di @azure/msal-angular. Karena @azure/msal-angular merupakan pustaka pembungkus untuk @azure/msal-browser, yang menggunakan objek global yang hanya tersedia di browser seperti objek window dan location, tidak semua fitur @azure/msal-angular tersedia saat menggunakan Angular Universal. Meskipun proses login dan perolehan token tidak didukung di sisi server, Angular Universal dapat digunakan dengan @azure/msal-angular tanpa merusak aplikasi Anda.

Silakan lihat instruksi dari dokumen Angular tentang cara menginstal Angular Universal dengan aplikasi yang ada, dan untuk informasi lebih lanjut tentang objek global khusus browser.

Untuk digunakan @azure/msal-angular dengan Angular Universal, lakukan penyesuaian berikut:

1. Hapus referensi ke objek khusus browser. Contoh Modul Angular kami memiliki komentar di samping baris-baris yang relevan yang harus dihapus agar dapat dirender di sisi server. Menghapus baris ini tidak akan memengaruhi aplikasi sampel jika menggunakan Angular Universal.

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

2. Sebagai alternatif, pemeriksaan dapat ditambahkan sebelum setiap baris yang menggunakan objek global yang hanya tersedia di browser.

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

3. Pemeriksaan yang sama harus ditambahkan ke panggilan HTTP apa pun yang dilakukan oleh aplikasi Anda, karena MsalInterceptor saat ini menggunakan objek khusus browser. Ini akan ditangani dalam perbaikan di masa mendatang. Lihat contoh di bawah ini di profile.component.ts dari aplikasi sampel MSAL Angular v2 Angular 11 kami yang lebih lama:

   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. Pastikan aplikasi Anda tidak menggunakan perutean berbasis hash. Strategi perutean bawaan untuk aplikasi sampel MSAL Angular v2 Angular 11 versi lama adalah perutean hash, jadi pastikan useHash diatur ke false dalam app-routing.module.ts:

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