Angular With WebWorkers

使用

• npm install --save @angular/platform-webworker @angular/platform-webworker-dynamic

• 在app.module.ts文件中，把BrowserModule 替换WorkerAppModule，从@angular/platform-webworker中导出。

• 修改main.ts

  import { bootstrapWorkerUi } from ‘@angular/platform-webworker’;

  bootstrapWorkerUi(‘webworker.bundle.js’);

• 添加workerLoader.ts 文件,这是webworker的入口。主要把platformBrowser改成platformWorkerAppDynamic,从@angular/platform-webworker-dynamic引入。

  import ‘polyfills.ts’;
  import ‘@angular/core’;
  import ‘@angular/common’;

  import { platformWorkerAppDynamic } from ‘@angular/platform-webworker-dynamic’;
  import { AppModule } from ‘./app/app.module’;

  platformWorkerAppDynamic().bootstrapModule(AppModule);

• 修改打包方式

  "entry": {
    "main": [
      "./src/main.ts"
    ],
    "polyfills": [
      "./src/polyfills.ts"
    ],
    "styles": [
      "./src/styles.css"
    ],
    "webworker": [
      "./src/workerLoader.ts" //增加一个入口。
    ]
  },
   plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            excludeChunks: ['webworker'] //这不能在html引入，要通过platformWorkerAppDynamic加载webworker
        })
    ]

在webworker上面运行差异

1.ElementRef类型的nativeElement属性，本来是获取dom。在webworker中是拿不到的。如果要对dom操作，使用ng自带的Renderer2、Renderer。

2.angular的RouterModule好像不能用，webworker.bundle.js:73400 Unhandled Promise rejection: No provider for PlatformLocation! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for PlatformLocation!

3.window，document不能使用。意味着document.cookie拿不到，且window.localStorage一样。

4.location对象（只读）：不能设置，可能导致angular router不能使用的原因。而且

• location.href===http://localhost:8080/webworker.bundle.js。结果应该是http://localhost:8080/。