Angular4 Web Worker应用程序未显示

问题描述：

我有一个非常占用CPU使用率的网站，我决定将其移植到网络工作者上.

I have a website that is heavy on CPU usage that I decide to port to web workers.

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

I have followed this step by step tutorial: https://medium.com/@enriqueoriol/angular-with-web-workers-step-by-step-dc11d5872135

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

I have cloned this rep and made it seem identical: https://github.com/kaikcreator/angular-cli-web-worker

我遇到了一些未定义文档或窗口的问题.在这些情况下，我在github rep上测试了模块是否存在问题，并且是模块，因此我将其删除.

I encountered a few issues where the document was not defined or the window. In these cases I tested on the github rep if its a problem with or with the module and it was the module so I removed them.

基本上我现在没有错误，并且该页面根本不显示:

Basically I have no error right now and the page simply doesn't display:

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

I assume it is because Angular has no way to access the window object so it can't inject the code.

我的app.module抱怨缺少平台位置提供程序，因此我添加了:

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

，同时用WorkerAppModule替换BrowserModule

这是我的main.ts

Here is my main.ts

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

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

我的webpack配置为: https://gist.github.com/misha130/9a21e1c08ca9e0bf79635deda3279b2d >

My webpack config is: https://gist.github.com/misha130/9a21e1c08ca9e0bf79635dedc3279b2d

阻止页面呈现页面的问题可能是什么?

What could be the problem that stops it from rendering the page?

编辑:经过调查，这引起了问题，而路由器模块的使用对我来说也引起了问题.如何使用PlatformLocations，RouterModule和Web Worker?

EDIT: After investigation this caused the problem and the usage of the router module causes the problem for me. How do I use PlatformLocations and RouterModule and Web Workers?

答

我还引用了提到的有关该帖子的评论之一，其中包括WORKER_UI_LOCATION_PROVIDERS和进入您的应用程序.

I was also referencing the Angular with Web Workers: Step by Step post on Medium (as did the OP). One of the comments on that post mentioned including WORKER_UI_LOCATION_PROVIDERS and WORKER_APP_LOCATION_PROVIDERS into your application.

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

In your main.ts, add WORKER_UI_LOCATION_PROVIDERS as the second argument of bootstrapWorkerUi()

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

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

在您的AppModule中，添加WORKER_APP_LOCATION_PROVIDERS.我还需要提供基本href的值(已在下面提供)

In your AppModule, add WORKER_APP_LOCATION_PROVIDERS. I also needed to provide a value for base href (which I've included below)

...
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问题.

That should get you past your PlatformLocation provider problem, and maybe even your future base href problem.

祝你好运！

Angular4 Web Worker应用程序未显示

相关推荐