在Angular 9中,服务器端渲染(SSR)时遇到“ReferenceError: document is not defined”错误是因为在服务器端执行代码时,没有可用的浏览器环境,因此无法访问document对象。
要解决此问题,可以使用Angular提供的Plaform服务来处理服务器端和客户端的差异。以下是解决方法的代码示例:
import { NgModule, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@NgModule({
providers: [
{ provide: PLATFORM_ID, useValue: 'browser' }
]
})
export class AppModule {
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server';
console.log(`Running ${platform}`);
}
}
import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-example',
template: 'This is running in the browser',
})
export class ExampleComponent implements OnInit {
isBrowser: boolean;
constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
ngOnInit() {
this.isBrowser = isPlatformBrowser(this.platformId);
}
}
通过使用Platform服务和isPlatformBrowser函数,可以在服务器端和浏览器端之间进行差异处理,避免在服务器端访问document对象时出现错误。
请注意,以上示例假定您的代码正在使用Angular Universal进行服务器端渲染。如果您没有使用Angular Universal,您需要根据您的服务器端环境进行适当的差异处理。