在 Angular Universal 中,有时候会出现加载两次的问题。这个问题通常是由于服务端和浏览器端同时触发了路由导航造成的。下面是一个解决方法的代码示例:
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule, APP_ID, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'my-app' }),
isPlatformBrowser(this.platformId) ? BrowserTransferStateModule : [],
// ...
],
// ...
})
export class AppModule {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string
) {
const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
console.log(`Running ${platform} with appId=${appId}`);
}
}
import { NgModule, APP_ID, PLATFORM_ID, Inject } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { isPlatformServer } from '@angular/common';
@NgModule({
imports: [
ServerModule,
isPlatformServer(this.platformId) ? ServerTransferStateModule : [],
// ...
],
// ...
})
export class AppServerModule {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(APP_ID) private appId: string
) {
const platform = isPlatformServer(platformId) ? 'on the server' : 'in the browser';
console.log(`Running ${platform} with appId=${appId}`);
}
}
通过以上的代码示例,我们在浏览器环境下只引入 BrowserTransferStateModule 模块,在服务器环境下只引入 ServerTransferStateModule 模块。这样就能够避免 Angular Universal 在 SSR 上加载两次的问题。