使用AngularUniversal进行服务端渲染的防御性编程思路

如果你不能从Angular平台注入你需要的正确全局值，你可以避免调用浏览器代码，只要不需要在服务器上访问。例如，通常调用全局窗口元素来获取窗口大小或其他一些视觉方面。但是，在服务器上，没有屏幕的概念，所以很少需要这个功能。开发人员可能会在网上和其他地方阅读到推荐的方法是使用isPlatformBrowser或isPlatformServer，此指南值得商榷。这是因为这样做最终会在应用程序代码中创建特定于平台的代码分支。这不仅会不必要地增加应用程序的大小，还会增加必须维护的复杂性。通过将代码分离到单独的特定于平台的模块和实现中，基本代码可以保留业务逻辑，并且特定于平台的异常将按它们应该的方式处理：在个案抽象的基础上。这可以使用Angular的依赖注入(DI)来完成，以删除有问题的代码并在运行时放入替换代码。下面是一个例子。为浏览器环境和服务器环境创建不同的服务类：}}//server-window.service.tsimport{Injectable}from'@angular/core';import{WindowService}from'./window.service';@Injectable()exportclassServerWindowServiceextendsWindowService{getWidth():number{返回0;在服务器端模块中，使用Angular注入框架注入ServiceWindowService实现：//app-server.module.tsimport{NgModule}from'@angular/core';import{WindowService}from'./window.service';import{ServerWindowService}from'./server-window.service';@NgModule({providers:[{provide:WindowService,useClass:ServerWindowService,}]})如果第三方提供的组件没有出如果您使用通用兼容组件，则除了基本应用程序模块之外，您还可以为浏览器和服务器（您应该已经拥有的服务器模块）创建两个单独的模块。基本应用程序模块将包含所有与平台无关的代码，浏览器模块将包含所有浏览器/服务器不兼容的代码，服务器模块反之亦然。为避免编辑过多的模板代码，您可以创建一个空操作组件来插入库组件。这是一个例子：//example.component.tsimport{Component}from'@angular/core';@Component({selector:'example-component',template:``,//这是由第三方库提供的//会导致在Universal上呈现问题})exportclassExampleComponent{}appmodule：//app.module.tsimport{NgModule}from'@angular/core';import{ExampleComponent}from'./example.component';@NgModule({declarations:[ExampleComponent],})浏览器端模块：//browser-app.module.tsimport{NgModule}from'@angular/core';import{LibraryModule}from'some-lib';import{AppModule}from'./app.module';@NgModule({imports:[AppModule,LibraryModule],})//library-shim.component.tsimport{Component}from'@angular/core';@Component({selector:'library-component',template:'',})exportclassLibraryShimComponent{}服务端模块：//server.app.module.tsimport{NgModule}from'@angular/核心';从'./li导入{LibraryShimComponent}brary-shim.component';import{AppModule}from'./app.module';@NgModule({imports:[AppModule],declarations:[LibraryShimComponent],})exportclassServerAppModule{}shim是平台特定的从不补丁支持的功能polyfills是计划支持或在较新版本中支持的功能的补丁。