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

Question

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

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

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

尽管我做了一些尝试来弄清楚这一点，但并没有取得太大进展。希望有人可以节省我很多时间（以及将来的读者）。

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具有以下演示内容的文件：

   共享工源

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

   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) { }
   }
   

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

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