AngularUniversal에서 클라이언트 전용 (서버 전용) 실행하는 방법

AngularUniversal을 이용하고 있을 때, 클라이언트만 혹은 서버만 실행하는 방법에 대해입니다.

어떤 상황에서 사용할 것인가?

예를 들어, Window 객체를 이용한 처리 등에서 자주 이용합니다.
다음과 같이 alert를 하는 처리를 넣었다고 합니다.

export class PlatformComponent implements OnInit {

  msg: String;
  constructor() {}

  ngOnInit() {
    this.msg = 'platform';
    alert('Hello!!')
  }

}

그러면 서버 측 렌더링을 할 때 window 함수가 없다는 오류가 발생합니다.

ERROR ReferenceError: alert is not defined
    at PlatformComponent.ngOnInit (/app/angular-universal/dist/server/main.js:526:9)
以下省略

이 때 이번에 소개하는 방법으로 클라이언트 측에서만 처리하도록 지정합니다.

수정 방법

component.ts 파일에서 지정

먼저 component.ts 파일에서 분기 방법입니다.@angular/core 의 PLATFORM_ID 를 이용하는 것으로, 실행되고 있는 환경이 클라이언트인지 서버인지를 판정하는 것이 가능합니다.

다음과 같이 이용합니다.

platform.component.ts

import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-platform',
  templateUrl: './platform.component.html',
  styleUrls: ['./platform.component.css']
})
export class PlatformComponent implements OnInit {

  msg: String;
  isBrowser: boolean;
  constructor(@Inject(PLATFORM_ID) private platformId) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit() {
    console.log('this is ' + ((this.isBrowser)? 'Browser': 'Server'))
    this.msg = 'platform';
    if (this.isBrowser) {
      alert('Hello!!')
    }
  }

}

그리고는, isBrowser 멤버를 준비해 두어, 브라우저 서버로 처리를 나눌 수가 있습니다.

서버 측 로그

this is Server

클라이언트 측 로그

this is Browser

component.html 파일에서 지정

component.html 파일에서도 분리를 할 수 있습니다.
다음과 같이 이용합니다.

platform.component.html

<ng-container *ngIf="isBrowser">
    <p>{{msg}}</p>
</ng-container>

실행 결과입니다.
브라우저 실행 결과






서버측 실행 결과view-source:http://localhost:4200/platform 에서 확인합니다.

서버에서 반환된 HTML

(省略)
  <app-root _nghost-sc0="" ng-version="8.2.13"><span _ngcontent-sc0="">This action returns all cats app is running!</span><p _ngcontent-sc0="">This is Body</p><router-outlet _ngcontent-sc0=""></router-outlet><app-platform _nghost-sc1=""><!----></app-platform></app-root>
(省略)

이 방법으로 <p>platform</p>가 출력되지 않았는지 확인할 수 있습니다.

이상입니다.