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