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 { }
现在我不知道我还应该修改哪些其他文件才能制作:
- app.module.ts 仅与平台无关的代码(可以导入到两个 server/browser 模块的共享模块)
- server.module.ts 只有服务器端代码(可以 ssr'ed)
- browser.module.ts 包括所有与平台无关的代码和浏览器代码(例如 fullcalendar 模块
我把事情复杂化了。为了避免在服务器端使用浏览器 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>
我遇到了 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 { }
现在我不知道我还应该修改哪些其他文件才能制作:
- app.module.ts 仅与平台无关的代码(可以导入到两个 server/browser 模块的共享模块)
- server.module.ts 只有服务器端代码(可以 ssr'ed)
- browser.module.ts 包括所有与平台无关的代码和浏览器代码(例如 fullcalendar 模块
我把事情复杂化了。为了避免在服务器端使用浏览器 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>