Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

Background processing using web workers

Web workers lets you run CPU-intensive computations in a background thread, freeing the main thread to update the user interface. Applications performing a lot of computations, like generating Computer-Aided Design (CAD) drawings or doing heavy geometric calculations, can use web workers to increase performance.

The Angular CLI does not support running itself in a web worker.

Adding a web worker

To add a web worker to an existing project, use the Angular CLI ng generate command.

      
      ng generate web-worker <location>
    

You can add a web worker anywhere in your application. For example, to add a web worker to the root component, src/app/app.component.ts, run the following command.

      
      ng generate web-worker app
    

The command performs the following actions.

  1. Configures your project to use web workers, if it isn't already.

  2. Adds the following scaffold code to src/app/app.worker.ts to receive messages.

    src/app/app.worker.ts
          
          addEventListener('message', ({ data }) => {
      const response = `worker response to ${data}`;
      postMessage(response);
    });
        
  3. Adds the following scaffold code to src/app/app.component.ts to use the worker.

    src/app/app.component.ts
          
          if (typeof Worker !== 'undefined') {
      // Create a new
      const worker = new Worker(new URL('./app.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
        console.log(`page got message: ${data}`);
      };
      worker.postMessage('hello');
    } else {
      // Web workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
    }
        

After you create this initial scaffold, you must refactor your code to use the web worker by sending messages to and from the worker.

Some environments or platforms, such as @angular/platform-server used in Server-side Rendering, don't support web workers. To ensure that your application works in these environments, you must provide a fallback mechanism to perform the computations that the worker would otherwise perform.

Last reviewed on Mon Feb 28 2022