feat(Answer-40): solution

Author: lukasss88

apps/performance/40-web-workers/project.json

@@ -20,7 +20,8 @@
           "apps/performance/40-web-workers/src/assets"
         ],
         "styles": ["apps/performance/40-web-workers/src/styles.scss"],
-        "scripts": []
+        "scripts": [],
+        "webWorkerTsConfig": "apps/performance/40-web-workers/tsconfig.worker.json"
       },
       "configurations": {
         "production": {

apps/performance/40-web-workers/src/app/app.component.ts

@@ -1,27 +1,33 @@
 import { Component, inject } from '@angular/core';
+import { FloorPipe } from './floor.pipe';
 import { HeavyCalculationService } from './heavy-calculation.service';
 import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
 
 @Component({
-  imports: [UnknownPersonComponent],
+  imports: [UnknownPersonComponent, FloorPipe],
   providers: [HeavyCalculationService],
   selector: 'app-root',
   template: `
     <unknown-person [step]="loadingPercentage()" class="relative grow" />
-    <button
-      class="my-3 w-fit self-center rounded-md border border-white px-4 py-2 text-2xl text-white"
-      (click)="discover()">
-      Discover
-    </button>
-    <div class="p-1 text-white">Progress: {{ loadingPercentage() }}%</div>
+
+    @if (loadingPercentage() == 0) {
+      <button
+        class="my-3 w-fit self-center rounded-md border border-white px-4 py-2 text-2xl text-white"
+        (click)="discover()">
+        Discover
+      </button>
+    }
+
+    <div class="p-1 text-white">
+      Progress: {{ loadingPercentage() | floor }}%
+    </div>
   `,
   host: {
     class: `flex flex-col h-screen w-screen bg-[#1f75c0]`,
   },
 })
 export class AppComponent {
   private heavyCalculationService = inject(HeavyCalculationService);
-
   readonly loadingPercentage = this.heavyCalculationService.loadingPercentage;
 
   discover() {

apps/performance/40-web-workers/src/app/app.worker.ts

@@ -0,0 +1,22 @@
+/// <reference lib="webworker" />
+
+addEventListener('message', ({ data }) => {
+  if (data === 'start') {
+    randomHeavyCalculationFunction();
+  }
+});
+
+function randomHeavyCalculationFunction() {
+  for (let num = 2; num <= 10000000; num++) {
+    let randomFlag = true;
+    for (let i = 2; i <= Math.sqrt(num); i++) {
+      if (num % i === 0) {
+        randomFlag = false;
+        break;
+      }
+    }
+    if (randomFlag) {
+      postMessage('prime found');
+    }
+  }
+}

apps/performance/40-web-workers/src/app/floor.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'floor',
+})
+export class FloorPipe implements PipeTransform {
+  transform(value: number): number {
+    return Math.floor(value);
+  }
+}

apps/performance/40-web-workers/src/app/heavy-calculation.service.ts

@@ -4,27 +4,23 @@ import { Injectable, computed, signal } from '@angular/core';
 export class HeavyCalculationService {
   private finalLength = 664579;
   private loadingLength = signal(0);
+  private worker: Worker | null = null;
+
+  constructor() {
+    this.worker = new Worker(new URL('./app.worker', import.meta.url));
+    this.worker.onmessage = () => {
+      this.loadingLength.update((l) => l + 1);
+    };
+  }
 
   loadingPercentage = computed(
     () => (this.loadingLength() * 100) / this.finalLength,
   );
 
   startLoading() {
-    this.randomHeavyCalculationFunction();
-  }
-
-  private randomHeavyCalculationFunction() {
-    for (let num = 2; num <= 10000000; num++) {
-      let randomFlag = true;
-      for (let i = 2; i <= Math.sqrt(num); i++) {
-        if (num % i === 0) {
-          randomFlag = false;
-          break;
-        }
-      }
-      if (randomFlag) {
-        this.loadingLength.update((l) => l + 1);
-      }
+    if (!this.worker) {
+      throw new Error('Web Worker is not supported in this environment.');
     }
+    this.worker.postMessage('start');
   }
 }

apps/performance/40-web-workers/src/app/web-worker.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WebWorkerService {
+  private worker: Worker;
+
+  constructor() {
+    this.worker = new Worker(new URL('./worker', import.meta.url));
+  }
+
+  executeTask(data: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+      this.worker.postMessage(data);
+      this.worker.onmessage = ({ data }) => {
+        resolve(data);
+      };
+    });
+  }
+}

apps/performance/40-web-workers/tsconfig.worker.json

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