Angular4 Web Worker应用程序未显示

Question

我有一个网站，CPU使用率很高，我决定移植给网络工作者。

我已按照此分步教程：https://medium.com/@enriqueoriol/angular-with-web-workers-step-by-step-dc11d5872135

我克隆了这个代表并使其看起来相同：https://github.com/kaikcreator/angular-cli-web-worker

我遇到了一些未定义文档或窗口的问题。在这些情况下，我在github rep上测试了它是否与模块有关或是模块的问题，因此我删除了它们。

基本上我现在没有错误，页面根本不显示：

我认为这是因为Angular无法访问窗口对象，因此无法注入代码。

我的app.module抱怨缺少平台位置提供商，所以我补充道：

import { WORKER_APP_LOCATION_PROVIDERS } from '@angular/platform-webworker';

用WorkerAppModule

替换BrowserModule时

这是我的主要内容

import { enableProdMode } from '@angular/core';
import { bootstrapWorkerUi } from '@angular/platform-webworker';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapWorkerUi('webworker.bundle.js');

我的workerLoader.ts

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);

我的网络包配置为：https://gist.github.com/misha130/9a21e1c08ca9e0bf79635dedc3279b2d

阻止它呈现页面的问题是什么？

编辑：经过调查后，这导致了问题，路由器模块的使用对我造成了问题。我如何使用PlatformLocations和RouterModule以及Web Workers？

Answer 1

我还引用了媒体上的Angular with Web Workers: Step by Step帖子（和OP一样）。 One of the comments on that post提到您的申请中包含WORKER_UI_LOCATION_PROVIDERS和WORKER_APP_LOCATION_PROVIDERS。

在您的main.ts中，添加WORKER_UI_LOCATION_PROVIDERS作为bootstrapWorkerUi()

的第二个参数

...
import {
  bootstrapWorkerUi,
  WORKER_UI_LOCATION_PROVIDERS
} from '@angular/platform-webworker'
...

bootstrapWorkerUi('webworker.bundle.js', WORKER_UI_LOCATION_PROVIDERS);

在AppModule中，添加WORKER_APP_LOCATION_PROVIDERS。我还需要为base href提供一个值（我已经包含在下面）

...
import {
  WorkerAppModule,
  WORKER_APP_LOCATION_PROVIDERS
} from '@angular/platform-webworker';
import { APP_BASE_HREF } from '@angular/common'
...

@NgModule({
  ...
  imports: [
    ...
    WorkerAppModule,
    ...
  ],
  ...
  providers: [
    ...
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    },
    WORKER_APP_LOCATION_PROVIDERS
    ...
  ],
  ...
})

这应该会让你超越你的PlatformLocation提供程序问题，甚至可能是你未来的基本href问题。

祝你好运！