Angular4 Web Worker application not displaying

Question

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

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

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

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:

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

My app.module complained about lacking platform location providers so I added:

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

while replacing the BrowserModule with the WorkerAppModule

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

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

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

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

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?

Answer 1

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.

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

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
    ...
  ],
  ...
})

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

Good luck!