这种问题通常是因为在应用程序模块中未正确设置模块导入而引起的。在应用程序模块中,必须使用ServerTransferStateModule
模块导入,并在应用程序的根模块中调用BrowserTransferStateModule
来避免这种问题。
示例代码:
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { ServerTransferStateModule } from '@angular/platform-server';
@NgModule({
imports: [
BrowserModule.withServerTransition({
appId: 'my-app'
}),
BrowserAnimationsModule,
ServerModule,
AppModule,
ServerTransferStateModule // add ServerTransferStateModule
],
bootstrap: [AppComponent]
})
export class AppServerModule {}
// src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppClientModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppClientModule)
.catch(err => console.error(err));
});
// src/app/app.component.ts
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { TransferState, makeStateKey } from '@angular/platform-browser';
const DATA_KEY = makeStateKey('my-data');
@Component({
selector: 'app-root',
template: `
My App
{{ data }}
`
})
export class AppComponent implements OnInit {
data: string;
constructor(
private transferState: TransferState,
@Inject
上一篇:Angular通用渲染问题