Angular Universal 응용 프로그램에서 webfontloader 사용

link 태그로 WEB 폰트를 읽는 것보다, webfontloader 로 비동기적으로 읽는 것이 PageSpeed ​​Insights 의 스코어가 좋아집니다.

그래서 Angular에서 webfontloader를 사용해 봅시다.

Angular Universal에서 SSR(서버 사이드 렌더링)을 하는 경우는, 한 가지 궁리하지 않으면 에러가 나오기 때문에, 이 기사를 참고해 주세요.

GitHub에 샘플 코드이 있습니다. 실제로 움직여보십시오

이 기사에 나온다 명령 모음 . 여기를 참조하십시오

전제

Angular 9.1.12

Angular Universal 9.1.11

응용 프로그램에서 webfontloader를 사용하여 웹 글꼴을 사용합니다.

준비

npm i webfontloader --save 로 설치합니다.
npm i @types/webfontloader --save-dev 에서 형식 정의도 설치하는 것이 좋습니다.

우선은 보통으로 사용해 본다

Angular Universal에서 SSR을 사용하지 않는 응용 프로그램에서 webfontloader를 사용해 봅시다.

app.component.ts

import { Component, OnInit } from '@angular/core'
import * as WebFont from 'webfontloader'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit() {
    WebFont.load({
      google: {
        families: ['Modak', 'M+PLUS+1p:400,900'],
      },
    })
  }
}

AppComponent 의 ngOnInit 로 이런 식으로 호출해 봅시다.

CSS 에 font-family: Modak; 라고 하면 폰트가 적용됩니다.

APP_INITIALIZER 사용

어플리케이션 전체로 읽어들일 필요가 있다면, APP_INITIALIZER 로 어플리케이션의 초기화시에 webfontloader 의 설정을 하도록 합시다.ng g service app-init 에서 AppInitService 를 만들고 다음과 같이 수정합니다.

app-init.service.ts

import { Injectable } from '@angular/core'
import * as WebFont from 'webfontloader'

export function AppInitFactory(appInit: AppInitService) {
  return () => appInit.init()
}

@Injectable({
  providedIn: 'root',
})
export class AppInitService {
  constructor() {}

  init() {
    this.initWebFont()
  }

  private initWebFont() {
    WebFont.load({
      google: {
        families: ['Modak', 'M+PLUS+1p:400,900'],
      },
    })
  }
}

그런 다음 app.module.ts를 수정합니다.

app.module.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule, APP_INITIALIZER } from '@angular/core'

import { AppComponent } from './app.component'
import { AppInitService, AppInitFactory } from './app-init.service'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // 以下を追加
    {
      provide: APP_INITIALIZER,
      useFactory: AppInitFactory,
      multi: true,
      deps: [AppInitService],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

이제 애플리케이션 초기화 시 링크 태그가 추가됩니다.

Angular Universal의 SSR

ng add @nguniversal/express-engine 다음에 npm run dev:ssr에서 응용 프로그램을 실행해 봅시다.

그러나 이대로는 ReferenceError: window is not defined 라는 에러가 나오고 서버를 시작할 수 없으므로 지금까지의 코드를 수정해 봅시다.

Angular Universal 용 수정

지금까지 만든 app-init.service.ts를 다음과 같이 수정합니다.

app-init.service.ts

import { Injectable, Inject, PLATFORM_ID } from '@angular/core'
import { isPlatformServer } from '@angular/common'

export function AppInitFactory(appInit: AppInitService) {
  return () => appInit.init()
}

@Injectable({
  providedIn: 'root',
})
export class AppInitService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  init() {
    this.initWebFont()
  }

  private initWebFont() {
    // SSRの場合は実行しないように
    if (isPlatformServer(this.platformId)) {
      return
    }
    // ここでimportしないとReferenceError: window is not definedになる
    import('webfontloader').then((WebFont) => {
      WebFont.load({
        google: {
          families: ['Modak', 'M+PLUS+1p:400,900'],
        },
      })
    })
  }
}

이것으로 모든 것이 끝납니다.