如果无奈从 Angular 平台注入所需的正确全局值，则能够防止调用浏览器代码，只有不须要在服务器上拜访该代码即可。 例如，全局窗口元素的调用通常是为了获取窗口大小或其余一些视觉方面。 然而，在服务器上，没有 screen 的概念，所以很少须要这个性能。

开发人员可能会在网上和其余中央浏览到举荐的办法是应用 isPlatformBrowser 或 isPlatformServer，这个领导值得商讨。

这是因为这样做的话，最终会在利用程序代码中创立特定于平台的代码分支。 这不仅不必要地减少了应用程序的大小，而且还减少了必须保护的复杂性。 通过将代码拆散到独自的特定于平台的模块和实现中，根本代码能够保留业务逻辑，并且特定于平台的异样将按应有的形式解决：在个案形象的根底上。 这能够应用 Angular 的依赖注入 (DI) 来实现，以便在运行时删除有问题的代码并放入替换代码。

上面是一个例子。

为浏览器环境和服务器环境别离创立不同的 service 类：

// window-service.tsimport { Injectable } from '@angular/core';@Injectable()export class WindowService {  getWidth(): number {    return window.innerWidth;  }}// server-window.service.tsimport { 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.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: `<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.tsimport {NgModule} from '@angular/core';import {ExampleComponent} from './example.component';@NgModule({  declarations: [ExampleComponent],})

浏览器端 module：

// 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: '',})export class LibraryShimComponent {}

服务器端 module：

// server.app.module.tsimport { 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 是打算反对或更新版本反对的性能的补丁。