show only what's really needed to use a web worker within a library

angular.json

@@ -22,6 +22,7 @@
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
             "scripts": [],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "production": {
@@ -90,6 +91,7 @@
               "tsconfig.app.json",
               "tsconfig.spec.json",
               "e2e/tsconfig.json",
+              "tsconfig.worker.json"
             ],
             "exclude": ["**/node_modules/**"]
           }

projects/demo-lib-consuming-webworker/src/lib/demo-lib-consuming-webworker.component.ts

@@ -1,7 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { FIBONACCI_WEBWORKER_FACTORY } from 'fibonacci-webworker';
+import { interval } from 'rxjs';
 
 @Component({
   selector: 'lib-demo-lib-consuming-webworker',
-  template: ``,
+  template: `
+    <p>
+      Timer just to prove that the page isn't frozen while we compute fibonacci
+      (which it would if we were doing it on the main thread!):
+      {{ timer$ | async }}
+    </p>
+
+    <div *ngIf="result; else computingTpl">
+      <h1>Fibonacci 45</h1>
+      <p>{{ result | json }}</p>
+    </div>
+
+    <ng-template #computingTpl>
+      Computing fibonacci(45)... Be patient =)!
+    </ng-template>
+  `,
 })
-export class DemoLibConsumingWebworkerComponent {}
+export class DemoLibConsumingWebworkerComponent {
+  public result;
+
+  public timer$ = interval(1000);
+
+  constructor(
+    @Inject(FIBONACCI_WEBWORKER_FACTORY) fibonacciWebworkerFactory: () => Worker
+  ) {
+    const fibonacciWebworker = fibonacciWebworkerFactory();
+
+    fibonacciWebworker.onmessage = ({ data }) => {
+      this.result = data;
+    };
+
+    fibonacciWebworker.postMessage(45);
+  }
+}

projects/fibonacci-webworker/src/lib/fibonacci.token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+
+export const FIBONACCI_WEBWORKER_FACTORY = new InjectionToken<() => Worker>(
+  'fibonacci'
+);

projects/fibonacci-webworker/src/lib/fibonacci.ts

@@ -0,0 +1,11 @@
+/// <reference lib="webworker" />
+
+// this file is excluded from the compilation of the `fibonacci-webworker` library
+// this is due to the fact that an app has to import it directly (instead of a path
+// coming from a ts alias path)
+
+import { fibonacci } from 'fibonacci';
+
+addEventListener('message', ({ data }) => {
+  postMessage(fibonacci(data));
+});

projects/fibonacci-webworker/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/fibonacci.token';

projects/fibonacci-webworker/tsconfig.lib.json

@@ -15,5 +15,5 @@
     "strictMetadataEmit": true,
     "enableResourceInlining": true
   },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
+  "exclude": ["src/lib/fibonacci.ts", "src/test.ts", "**/*.spec.ts"]
 }

projects/fibonacci/src/lib/fibonacci.ts

@@ -0,0 +1,12 @@
+// I've chosen a slow implementation of fibonacci on purpose
+// so that it takes more time to run otherwise an optimised
+// version could take less than 1s to compute fibonacci(3000)
+// while this one will struggle with fibonacci(30)
+// https://stackoverflow.com/questions/11287418/why-is-this-js-code-so-slow
+export const fibonacci = (n) => {
+  if (n < 2) {
+    return n;
+  } else {
+    return fibonacci(n - 1) + fibonacci(n - 2);
+  }
+};

src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,16 +1,34 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { FIBONACCI_WEBWORKER_FACTORY } from 'fibonacci-webworker';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
-    BrowserModule
+    BrowserModule,
+    RouterModule.forRoot([
+      {
+        path: '',
+        loadChildren: () =>
+          import('demo-lib-consuming-webworker').then(
+            (m) => m.DemoLibConsumingWebworkerModule
+          ),
+      },
+    ]),
+  ],
+  providers: [
+    {
+      provide: FIBONACCI_WEBWORKER_FACTORY,
+      useValue: function (): Worker {
+        return new Worker('projects/fibonacci-webworker/src/lib/fibonacci', {
+          name: 'fibonacci.worker',
+          type: 'module',
+        });
+      },
+    },
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

tsconfig.worker.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/worker",
+    "lib": ["es2018", "webworker"],
+    "types": []
+  },
+  "include": [
+    "src/**/*.worker.ts",
+    "projects/fibonacci-webworker/src/lib/fibonacci.ts"
+  ]
+}