Have you ever tried to build Angular Universal in your project for the first time? It wasn’t easy at all, right?

Angular good practices recommends you to avoid any logic inside components that it’s not directly related with the view. You should move all that logic to services.

Working with services that already exist (like HttpClient) is cool and easy. But your feelings may change when you have to create your own services.

At a first glance, it looks easy. Soon you’ll realize that in order to share data from a service to the component, you’ll need to understand a little bit about RxJS. This is because reactive programming is highly promoted by Angular. Observables are the perfect companion for services.

This article describes, step by step, how to modify an existing Angular CLI generated app so it can take advantage of the Angular WebWorkers and run all the business logic inside an isolated thread.


I’m assuming that you have an Angular project (version 2 or 4) generated with Angular CLI 1.0 or higher. If that’s not the case and you want to practice the content of this article, check this sample repo.

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.

  1. Run ng eject so Angular…

Enrique oriol

Frontend Team Lead at Dynatrace. Angular & Ionic evangelist. Father, lover, blogger, Udemy trainer. — blog.enriqueoriol.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store