为SSR浏览器/服务器/应用拆分Angular通用模块

Question

我正面临一个问题与Angular通用投掷:

ERROR ReferenceError: document is not defined

这是试图访问服务器端文档的Fullcalendar模块，该模块在服务器上不存在。我想做的是遵循Angular Git hub的指导方针，从https://github.com/angular/universal/blob/master/docs/gotchas.md，说:

如果你有一个由第三方提供的组件不是通用兼容的，你可以为浏览器和服务器创建两个单独的模块(服务器模块你应该已经有了)，除了你的基本应用模块。基础应用模块将包含所有与平台无关的代码，浏览器模块将包含所有特定于浏览器/服务器不兼容的代码，服务器模块反之亦然。为了避免编辑过多的模板代码，您可以为库组件

创建一个无操作组件。

我创建了浏览器模块:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { CalendarModule } from './calendar/calendar.module';
@NgModule({
imports: [
AppModule,
CalendarModule // <---- this module will include the code that must only run on the browser
],
bootstrap: [AppComponent]
})
export class AppBrowserModule { }

现在我不知道我还需要修改哪些文件来制作:

• app.module。它只有与平台无关的代码(可以同时导入到服务器/浏览器模块的共享模块)
• server.module。只有服务器端代码(可以被修改)
• browser.module。包含所有与平台无关的代码和浏览器代码(例如fullcalendar模块
)。

Answer 1

我把事情复杂化了。为了避免服务器端使用浏览器api，我简单地将FullCalendar组件包装在ng-template中，如下所示:

在构造函数中设置isBrowser为isPlatformBrowser

constructor(
@Inject(PLATFORM_ID) private platformId,
private eventService: EventsService, 
private router: Router){
this.isBrowser = isPlatformBrowser(this.platformId);
console.log(this.isBrowser)
}

和模板中的

<ng-container *ngIf="isBrowser">
<full-calendar [options]="calendarOptions"></full-calendar>
</ng-container>