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

Angular Universal module split for SSR browser / server / app

我遇到了 Angular 通用投掷的问题:

ERROR ReferenceError: document is not defined

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

If you have a component provided by a third-party that is not Universal-compatible out of the box, you can create two separate modules for browser and server (the server module you should already have), in addition to your base app module. The base app module will contain all of your platform-agnostic code, the browser module will contain all of your browser-specific/server-incompatible code, and vice-versa for your server module. In order to avoid editing too much template code, you can create a no-op component to drop in for the library component

我已经创建了浏览器模块:

 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 { }

现在我不知道我还应该修改哪些其他文件才能制作:

我把事情复杂化了。为了避免在服务器端使用浏览器 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>