如何配置 Angular-CLI 生成的项目以包含 SharedWorker

Question

将 SharedWorker 添加到 @angular/cli >1.2 生成的项目的具体步骤是什么。我希望 SharedWorker 在 TypeScript 中定义（具有 full/correct 类型定义编辑器支持），与主项目共享接口，并与主项目一起持续编译和测试。

我还没有发现描述如何修改 cli 生成的项目以包含 Worker 或 SharedWorker 的示例或博客 post。但是，有几个 post（例如一个）展示了如何将整个 cli 生成的项目转换为运行它作为网络工作者。但这不是我的用例。

我想将与 Lovefield 数据库的交互限制在 SharedWorker 中，运行与主应用程序处于不同的进程中。

虽然我尝试了一些尝试来解决这个问题，但我没有取得太大进展。希望有人能为我（和未来的读者）节省很多时间。

Answer 1

我按照以下步骤让它工作：

创建文件夹src\app\shared-worker

创建包含以下内容的文件 src\app\shared-worker\shared-worker.d.ts:

SharedWorker 定义

declare module SharedWorker {
    interface AbstractWorker extends EventTarget {
        onerror: (ev: ErrorEvent) => any;
    }
    export interface SharedWorker extends AbstractWorker {
        port: MessagePort;
        onconnect: (messageEvent: MessageEvent) => void;
    }
}
declare var SharedWorker: {
    prototype: SharedWorker.SharedWorker;
    new(stringUrl: string, name?: string): SharedWorker.SharedWorker;
};
// Merely added the onconnect() method to the file provied via:
// npm install --save-dev retyped-sharedworker-tsd-ambient
// Definitions by: Toshiya Nakakura <https://github.com/nakakura>

使用以下演示内容创建文件 src\app\shared-worker\shared-worker.ts：

Sharedworker 来源

/// <reference path=".\shared-worker.d.ts" />

(<any>self).onconnect = (connectEvent: MessageEvent) => {
    const messagePort: MessagePort = (connectEvent.ports as MessagePort[])[0];

    messagePort.onmessage = function (messageEvent: MessageEvent) {
        const workerResult: number = messageEvent.data.firstNumber * messageEvent.data.secondNumber;
        messagePort.postMessage(workerResult);
    };

};

更新src\app\app.component.ts如下：

AppComponent

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';

@Component({
    selector: 'app-root',
    template: `
<input type="number" [(ngModel)]="firstNumber" />
<input type="number" [(ngModel)]="secondNumber" />
<hr /><button (click)="postMessageToSharedWorker()">Invoke Shared Worker</button>
<hr /><div>Result: {{result$ | async}}</div>`
})
export class AppComponent implements OnInit {
    public firstNumber = 4;
    public secondNumber = 8;
    private resultSubject = new Subject<number>();
    private sharedWorker: SharedWorker.SharedWorker;
    public result$: Observable<number>;

    public ngOnInit(): void {
        this.result$ = this.resultSubject.asObservable();
        if ('SharedWorker' in window) {
            this.sharedWorker = new SharedWorker('app/shared-worker/shared-worker.js');
            this.sharedWorker.port.onmessage = (messageEvent: MessageEvent) => {
                this.resultSubject.next(messageEvent.data);
                this.changeDetectorRef.detectChanges();
            };
        }
    }

    public postMessageToSharedWorker() {
        if (!('SharedWorker' in window)) {
            return;
        }
        this.sharedWorker.port.postMessage({ firstNumber: this.firstNumber, secondNumber: this.secondNumber });
    }
    constructor(private changeDetectorRef: ChangeDetectorRef) { }
}

将"app/shared-worker/shared-worker.js"添加到.angular-cli.json

apps.assets

安装 concurrently 作为开发依赖项：npm i -D concurrently

创建 package.json 个脚本

package.json

"wrk-w": "tsc --noLib --experimentalDecorators --watch node_modules/typescript/lib/lib.es6.d.ts src/app/shared-worker/shared-worker.d.ts src/app/shared-worker/shared-worker.ts",
"dev": "concurrently --kill-others \"npm run wrk-w\" \"npm run start\""

Answer 2

只需安装@types/sharedworker并将其添加到"types"数组选项中的tsconfig.app.json。

如何配置 Angular-CLI 生成的项目以包含 SharedWorker

How to configure Angular-CLI-generated project to include a SharedWorker

web-worker

shared-worker

angular-cli

lovefield

angular