SSRでも安心！Angular ResolverからWeb Workerを呼び出してパフォーマンスを改善する方法

            $ ng generate web-worker workers
CREATE src/app/workers.worker.ts (157 bytes)
CREATE tsconfig.worker.json (334 bytes)
UPDATE angular.json (3405 bytes)

        

            //...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            //👇追加されている
            "webWorkerTsConfig": "tsconfig.worker.json"
          },
//...

        

            $ ng generate web-worker workers
Web Worker requires a project type of "application".

        

            import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { of, lastValueFrom } from 'rxjs';
import { HttpClient } from '@angular/common/http'; // データ取得用

// ☆Resolverクラスの外部スコープでWorkerのハンドル関数を定義することが重要
async function createWorker(message: any): Promise<any> {
    if (typeof Worker !== 'undefined') {
        // ブラウザ環境ではWorkerを作成して処理を実行
        return new Promise((resolve, reject) => {
            const worker = new Worker(new URL('./workers.worker', import.meta.url));
            worker.onmessage = ({ data }) => {
                worker.terminate();
                resolve(data);
            };
            worker.onerror = (error) => {
                worker.terminate();
                reject(error);
            };
            worker.postMessage(message);
        });
    } else {
        // サーバーサイド（Node.js）環境ではWorkerは使えないため、ここでは何もしない
        // 必要であれば、サーバーサイド用の代替処理をここに記述することも可能
        return Promise.resolve(message);
    }
}

@Injectable({
    providedIn: 'root'
})
export class BlogpageResolver implements Resolve<any> {

    constructor(private http: HttpClient) {}

    async resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Promise<any> {
        try {
            // 例として、外部からブログ記事データを取得
            const _data = await lastValueFrom(this.http.get(`api/articles/${route.paramMap.get('aid')}`));

            // Workerに重いデータ処理を依頼
            const _res = await createWorker(_data);

            // 解決したデータをObservableとしてルートに渡す
            return of(_res);
        } catch (error) {
            console.error('Resolver Error:', error);
            // エラーが発生した場合は空のObservableを返すなど、適切なエラーハンドリングを行う
            return of(null);
        }
    }
}

        

            import { Routes } from '@angular/router';
import { BlogPageComponent } from './blog-page.component';
import { BlogpageResolver } from './blogpage.resolver';

export const blogRoutes: Routes = [
    {
        path: 'blog/:aid',
        component: BlogPageComponent,
        resolve: {
            // 'blogpage'というキーでResolverの解決結果をマッピング
            blogpage: BlogpageResolver,
        }
    }
];

        

            /// <reference lib="webworker" />

import '@angular/compiler';
// 例として、重い処理を行う外部ライブラリをインポート
import { someHeavyProcess } from 'some-heavy-library';

addEventListener('message', ({ data }) => {
    // メインスレッドから渡されたデータを使って重い処理を実行
    const result = someHeavyProcess(data);
    // 処理結果をメインスレッドに返す
    postMessage(result);
});

        

            Uncaught Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

        

            import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-blog-page',
    standalone: true,
    imports: [CommonModule],
    template: `
        <div *ngIf="isLoading" class="loader">Loading...</div>
        <article *ngIf="articleData$ | async as article">
            <h1>{{ article.title }}</h1>
            <div [innerHTML]="article.content"></div>
        </article>
    `,
})
export class BlogPageComponent implements OnInit {
    isLoading: boolean = true;
    articleData$!: Observable<any>;

    private route = inject(ActivatedRoute);

    ngOnInit() {
        // route.dataはObservable<Data>を返す
        this.route.data.subscribe({
            next: (data) => {
                // 'blogpage'キーで登録したResolverの結果（Observable）を取得
                if (data && data['blogpage']) {
                    this.articleData$ = data['blogpage'];
                    this.isLoading = false;
                }
            },
            error: (err) => {
                console.error(err.message);
                this.isLoading = false;
            }
        });
    }
}