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

Question

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

我还没有找到描述如何修改 cli 生成的项目以包含 aWorker或SharedWorker. 但是，有几篇文章（例如这篇文章）展示了如何转换整个 cli 生成的项目以将其作为 Web Worker 运行。但这不是我的用例。

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

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

score 6 · Accepted Answer

我按照以下步骤完成了这项工作：

创建文件夹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使用以下演示内容创建文件：

共享工作者来源

/// <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如下：

应用组件

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"到apps.assets节点中.angular-cli.json
concurrently作为开发依赖安装：npm i -D concurrently

创建package.json脚本

包.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\""

score 0 · Accepted Answer

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

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

2 回答 2

Related

Reference