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

Question

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

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

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

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

Answer 1

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

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

2. 使用以下内容创建文件 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>
   

3. 使用以下演示内容创建文件 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);
       };
   
   };
   

4. 更新 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) { }
   }
   

5. 将 "app/shared-worker/shared-worker.js" 添加到 .angular-cli.json 中的 apps.assets 节点

6. 安装 concurrently 作为开发依赖:npm i -D concurrently

7. 创建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\""