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

【问题标题】：How to configure Angular-CLI-generated project to include a SharedWorker如何配置 Angular-CLI 生成的项目以包含 SharedWorker
【发布时间】：2017-09-11 15:42:12
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular angular-cli web-worker shared-worker lovefield

【解决方案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：

共享工作者来源

/// <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"添加到.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\""

【讨论】：

我放弃了尝试正确格式化此内容。这个编辑器太糟糕了。
对格式化有点帮助。编辑器有一个错误/功能，即在（编号的）列表中时不能有代码块。所以在代码起作用之前添加一个标题
@PierreDuc 您可以在编号列表中包含代码块。你只需要再缩进一点。
@Stefan 你会不会看，这是一个奇迹！ :D

【解决方案2】：

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

【讨论】：