Angular CLI generated app with Web Workers

Question

Reading the Angular Documentation, you can find several references to bootstrap your whole Angular app inside a Web Worker, so your UI won't get blocked by heavy JS usage.

However, at this moment there's no official information on how to do that, and the only info in the Angular Doc. is that this is an experimental feature.

How can I use this approach to take advantage of web workers in Angular?

Answer 1

For Angular 7, see answer below.

I spent a lot of time to figure out how to do it, so I hope this can help someone.

Preconditions

I’m assuming that you have an Angular project (version 2 or 4) generated with Angular CLI 1.0 or higher.

It is not mandatory to generate the project with CLI to follow this steps, but the instructions I'll give related with the webpack file, are be based on the CLI webpack config.

Steps

1. Extract webpack file

Since Angular CLI v1.0, there’s the “eject” feature, that allows you to extract the webpack config file and manipulate it as you wish.

• Run ng eject so Angular CLI generates the webpack.config.js file.

• Run npm install so the new dependencies generated by CLI are satisfied

2. Install webworker bootstrap dependencies

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

3. Changes in UI thread bootstrap

3.1 Changes in app.module.ts

Replace BrowserModule by WorkerAppModule in the app.module.ts file. You’ll also need to update the import statement in order to use @angular/platform-webworker library.

//src/app/app.module.ts

import { WorkerAppModule } from '@angular/platform-webworker';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
//...other imports...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule,
    //...other modules...
  ],
  providers: [/*...providers...*/],
  bootstrap: [AppComponent]
})
export class AppModule { }