如果無法從 Angular 平臺注入所需的正確全域性值，則可以避免呼叫瀏覽器程式碼，只要不需要在伺服器上訪問該程式碼即可。 例如，全域性視窗元素的呼叫通常是為了獲取視窗大小或其他一些視覺方面。 但是，在伺服器上，沒有 screen 的概念，所以很少需要這個功能。

開發人員可能會在網上和其他地方閱讀到推薦的方法是使用 isPlatformBrowser 或 isPlatformServer，這個指導值得商榷。

這是因為這樣做的話，最終會在應用程式程式碼中建立特定於平臺的程式碼分支。 這不僅不必要地增加了應用程式的大小，而且還增加了必須維護的複雜性。 透過將程式碼分離到單獨的特定於平臺的模組和實現中，基本程式碼可以保留業務邏輯，並且特定於平臺的異常將按應有的方式處理：在個案抽象的基礎上。 這可以使用 Angular 的依賴注入 (DI) 來完成，以便在執行時刪除有問題的程式碼並放入替換程式碼。

下面是一個例子。

為瀏覽器環境和伺服器環境分別建立不同的 service 類：

```typescript
// 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 實現：

```typescript
// 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,
  }]
})
```
如果第三方提供的元件不是開箱即用的通用相容元件，則除了基本應用程式模組之外，您還可以為瀏覽器和伺服器（您應該已經擁有的伺服器模組）建立兩個單獨的模組。 基本應用程式模組將包含所有與平臺無關的程式碼，瀏覽器模組將包含所有特定於瀏覽器/伺服器不相容的程式碼，反之亦然用於伺服器模組。 為了避免編輯過多的模板程式碼，您可以建立一個空操作元件以插入庫元件。 這是一個例子：

```typescript
// 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：

```typescript
// app.module.ts
import {NgModule} from '@angular/core';
import {ExampleComponent} from './example.component';

@NgModule({
  declarations: [ExampleComponent],
})
```
瀏覽器端 module：

```typescript
// browser-app.module.ts
import {NgModule} from '@angular/core';
import {LibraryModule} from 'some-lib';
import {AppModule} from './app.module';

@NgModule({
  imports: [AppModule, LibraryModule],
})
```
```typescript
// library-shim.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'library-component',
  template: '',
})
export class LibraryShimComponent {}
```

伺服器端 module：

```typescript
// 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 是計劃支援或更新版本支援的功能的補丁。

使用 Angular Universal 進行伺服器端渲染的防禦性程式設計思路

相關文章