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

Question

将

SharedWorker

添加到

@angular/cli >1.2

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

我还没有发现描述如何修改 cli 生成的项目以包含

Worker

或

SharedWorker

的示例或博客文章。但是，有几篇文章（例如 this 一篇）展示了如何转换整个 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

   如下：

   应用组件

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

Answer 2

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

Answer 3

您可以使用 CLI 生成标准专用 Web Worker，然后更新代码以使用 Shared Worker。

new SharedWorker(new URL('./shared.worker', import.meta.url))

Angular CLI 将自动处理编译和捆绑工作文件。