Preloading Data in Angular Universal

After I wrote the code for my last post, I realized I had a fundamental misunderstanding about how Angular Universal can pre-fetch data.

Original Work Around

In certain circumstances, you can use ZoneJS's scheduleMacroTask in order to run code outside of your component. You can't preload something in a constructor, because it is a constructor that returns a new object. The ngOnInit may work, depending on your circumstances.

No, it wasn't until I started learning other frameworks that Angular Universal Providers started to make sense. If you go back and read my past articles, you can start to see this evolution.

In order to prefetch your data correctly, you must load it outside of your component first. You can't always use the ZoneJS hack, because it could cause circular functions that rely on each other.

Other Frameworks

The biggest thing I hate about React is how it handles state. Once you start digging into NextJS, NuxtJS, and SvelteKit, you realize the data is always preloaded from the function / class, and then the data is passed to that class.

Angular Universal

This is how Angular Universal is meant to handle your data. If you Google the many stackoverflow articles, you will see this process extremely over complicated.

Basically you're going to load your data in a in your app.module.ts from your service using APP_INITIALIZER. The service itself does not return any data, but keeps the data in state.

app.module.ts

providers: [{
    provide: APP_INITIALIZER,
    deps: [myService],
    useFactory: (rest: myService) => async () => await rest.getData(),
    multi: true
  }],

Example File

myService.ts

Here you just fetch the data, and save it to a variable like this.data. When you pass this instance of the service as your providers to the new component, it will be ready to be loaded in the this.data variable.

async getData(): Promise<void> {
  ...
  this.data = await this.fetchData();
}

Notice this function does not return anything.

Example File

app.component.ts
Here you literally just get the data from your service this.data, and do with it as you please. Incredibly simple.

import { Component } from '@angular/core';

import { RestService } from './rest.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'angular-test';
  data: string;

  constructor(private rest: RestService) {
    this.data = this.rest.data;
  }
}

Example File

The full source code was used for my last post, so you can see it fully in action with proper state transfer, a rest api, and deployed to Vercel.

See it in action. If you read my last post, you will notice the 'some data...' string is already in the DOM, and it now loads correctly.

J