在Angular universal中,应该使用platform-browser来渲染浏览器端的内容,使用platform-server来渲染服务器端的内容。同时,在app.module.ts中需要使用BrowserModule和ServerModule来分别为浏览器和服务器提供正确的模块。
代码示例:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ServerModule } from '@angular/platform-server';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({appId: 'my-app'}),
ServerModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => {
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/ngsw-worker.js');
}
})
.catch(err => console.error(err));
});