Using Node.js in Angular and TransferState

In this post, we're going to learn how to use Node.js in your Angular app 

and pass data between the backend and the frontend

. Angular Universal provides a tool called 

 that will help you prevent duplicate data fetching -- it's super handy and a bit advanced. 

Below is a tutorial that introduces the ideas of 

 and how to use it, but if you want a step-by-step walkthrough with complete code, then 

. The course is about 270+ pages over 40 lessons that teach every step to creating blazing fast Angular apps.

Angular Universal is a powerful tool to address the SEO pitfall of Single Page Applications. Unfortunately, it's not a magic wand, and sometimes you need to adjust your application to make it efficient. Such a problem occurs when your application performs an HTTP call (to the back-end) during the initialization. Does it make sense to perform that call as well in the back-end as in the front-end?

Let's assume we're building a task application and we have a text-file 

 on our server, with the following in it:

[
  "do shopping",
  "make dinner",
  "clean up",
  "visit parents"
]

We could implement a back-end endpoint that will read the file content and send it back to the requester, e.g. from our 

// the "normal" way - we're going to be better
server.get('/tasks', (req, res) => {
  res.sendFile(
      join(process.cwd(), 
      './tasks.json'));
});

And then load this file via an HTTP request. 

// again, the "normal" way
export class TasksService {
  constructor(private http: HttpClient) { }

  public getTasks():Observable<string[]> {
    return this.http.get<string[]>('/tasks');
  }
}

But with Universal, we can take this one step further and

Of course, we don't want Angular to perform HTTP calls when running on the server when we don't have to. And so with Universal we can 

import * as fs from 'fs';
// ...
export class TasksServerService {
  constructor() {}

  public getTasks(): Observable<string[]> {
    return new Observable((observer) => {
      fs.readFile(
        `${process.cwd()}/tasks.json`,
        'utf8',
        (err, data) => {
          observer.next(JSON.parse(data));
          observer.complete();
        }
      );
    });
  }
}

It's okay if you do a double-take on the above: isn't this 

 code? Yes it is, but that's the sort of thing we're able to do with Universal. 

 in a component. Here's what it could look like:

export class AppComponent {
  public tasks$: Observable<string[]>;
  constructor(
      private tasksService: TasksService) {}

  ngOnInit(): void {
    this.refresh();
  }

  public refresh(): void {
    this.tasks$ = this.tasksService.getTasks();
  }
}

Now if we were to load this page and view the 

 tab, we'd see that we're still making a call to 

It would be great to introduce a mechanism that passes such data along with the application bundle. That's what 

s to identify the data we want to transfer to the browser:

import { 
    makeStateKey, 
    StateKey 
    } from '@angular/platform-browser';

export class StateKeys {
  public static get TASKS(): StateKey<string[]> {
    return makeStateKey<string[]>('tasks');
  }
}

 registry when data is read from the filesystem:

export class TasksServerService {
  constructor(private ts: TransferState) {}

  public getTasks(): Observable<string[]> {
    return new Observable((observer) => {
      fs.readFile(
        `${process.cwd()}/tasks.json`,
        'utf8',
        (err, data) => {
          const tasks = JSON.parse(data);
          this.ts.set(StateKeys.TASKS, tasks);

          observer.next(tasks);
          observer.complete();
        }
      );
    });
  }
}

 entry. The registry will be passed along with the rendered view to the browser!

Now on the browser side, we need to configure it to read from the 

 registry or fall back to an HTTP request when the registry is empty:

export class TasksService {
  constructor(
      private http: HttpClient, 
      private ts: TransferState) {}

  public getTasks(): Observable<string[]> {
    if (this.ts.hasKey(StateKeys.TASKS)) {
      return of(this.ts.get<string[]>(
          StateKeys.TASKS, [])).pipe(
        tap(() => this.ts.remove(StateKeys.TASKS))
      );
    } else {
      return this.http.get<string[]>('/tasks');
    }
  }
}

Now if we navigate to our app, we can verify in the 

 button and we would see that the new list is retrieved via HTTP, rather than from the 

Above is a quick introduction to the ideas, but of course, there are specific things you need to do to implement it for real. We walk through those details in the course. You can 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Using Node.js in Angular and TransferState</h1><p>In this post, we're going to learn how to use Node.js in your Angular app <strong>and pass data between the backend and the frontend</strong>. Angular Universal provides a tool called <code>TransferState</code> that will help you prevent duplicate data fetching -- it's super handy and a bit advanced. </p><p>Below is a tutorial that introduces the ideas of <code>TransferState</code> and how to use it, but if you want a step-by-step walkthrough with complete code, then <a href="https://www.newline.co/courses/newline-guide-to-angular-universal/?code=nglaunch" rel="noopener noreferrer nofollow">grab a copy of the course</a>. The course is about 270+ pages over 40 lessons that teach every step to creating blazing fast Angular apps.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201130045143761_angular-universal-hero.jpg" attachmentid="92f98f93-191b-498c-b38a-3d5a081a1d6d" contenteditable="false" data-width="600" data-height="338"><div></div></figure><h1><a name="the-problem-and-transferstate" id="the-problem-and-transferstate">The Problem and TransferState</a></h1><p>Angular Universal is a powerful tool to address the SEO pitfall of Single Page Applications. Unfortunately, it's not a magic wand, and sometimes you need to adjust your application to make it efficient. Such a problem occurs when your application performs an HTTP call (to the back-end) during the initialization. Does it make sense to perform that call as well in the back-end as in the front-end?</p><p>Let's assume we're building a task application and we have a text-file <code>tasks.json</code> on our server, with the following in it:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-FQRlwUlKk72UkExMYA0dD" id="cm-FQRlwUlKk72UkExMYA0dD">[
  "do shopping",
  "make dinner",
  "clean up",
  "visit parents"
]</textarea><p>We could implement a back-end endpoint that will read the file content and send it back to the requester, e.g. from our <em>express</em> server:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-50YFqolOcSer3tSmWshbD" id="cm-50YFqolOcSer3tSmWshbD">// the "normal" way - we're going to be better
server.get('/tasks', (req, res) =&gt; {
  res.sendFile(
      join(process.cwd(), 
      './tasks.json'));
});</textarea><p>And then load this file via an HTTP request. </p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-wdogzkXDsySGbTMRwK3_Y" id="cm-wdogzkXDsySGbTMRwK3_Y">// again, the "normal" way
export class TasksService {
  constructor(private http: HttpClient) { }

  public getTasks():Observable&lt;string[]&gt; {
    return this.http.get&lt;string[]&gt;('/tasks');
  }
}</textarea><p>But with Universal, we can take this one step further and</p><ol><li><p>read the file during server-side-rendering and</p></li><li><p>pass the information to the client on render </p></li></ol><p>Of course, we don't want Angular to perform HTTP calls when running on the server when we don't have to. And so with Universal we can <strong>use Node.js APIs</strong> like <code>fs</code> and <strong>just read the file directly</strong>.</p><p>Here's how we could create the <code>TasksService</code> equivalent on the server:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-PZMXpxvxeSueYHUU4lY1z" id="cm-PZMXpxvxeSueYHUU4lY1z">import * as fs from 'fs';
// ...
export class TasksServerService {
  constructor() {}

  public getTasks(): Observable&lt;string[]&gt; {
    return new Observable((observer) =&gt; {
      fs.readFile(
        `${process.cwd()}/tasks.json`,
        'utf8',
        (err, data) =&gt; {
          observer.next(JSON.parse(data));
          observer.complete();
        }
      );
    });
  }
}</textarea><p>It's okay if you do a double-take on the above: isn't this <em>Angular</em> code? Yes it is, but that's the sort of thing we're able to do with Universal. </p><p>Let's say we want to use this <code>TaskService</code> in a component. Here's what it could look like:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Ifd0OpaVSKzgITtdQBNBJ" id="cm-Ifd0OpaVSKzgITtdQBNBJ">export class AppComponent {
  public tasks$: Observable&lt;string[]&gt;;
  constructor(
      private tasksService: TasksService) {}

  ngOnInit(): void {
    this.refresh();
  }

  public refresh(): void {
    this.tasks$ = this.tasksService.getTasks();
  }
}</textarea><p>Now if we were to load this page and view the <em>Network</em> tab, we'd see that we're still making a call to <code>/tasks.json</code> - but we don't need to!</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201130045304994_browser1.jpg" attachmentid="1b2c559b-6509-41c2-9e0a-8bb7225ddc19" contenteditable="false" data-width="1697" data-height="1045"><div></div></figure><p>It would be great to introduce a mechanism that passes such data along with the application bundle. That's what <code>TransferState</code> is for.</p><h2><a name="introducing-transferstate" id="introducing-transferstate">Introducing TransferState</a></h2><p>To use <code>TransferState</code> we first create <code>StateKey</code>s to identify the data we want to transfer to the browser:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-IvdYDxGJ8qib5W2_GlaDz" id="cm-IvdYDxGJ8qib5W2_GlaDz">import { 
    makeStateKey, 
    StateKey 
    } from '@angular/platform-browser';

export class StateKeys {
  public static get TASKS(): StateKey&lt;string[]&gt; {
    return makeStateKey&lt;string[]&gt;('tasks');
  }
}</textarea><p>Then we update the <code>getTasks()</code> method to set entry to the <code>TransferState</code> registry when data is read from the filesystem:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-z0LLCWGTrPUX0Vz4pcAOI" id="cm-z0LLCWGTrPUX0Vz4pcAOI">export class TasksServerService {
  constructor(private ts: TransferState) {}

  public getTasks(): Observable&lt;string[]&gt; {
    return new Observable((observer) =&gt; {
      fs.readFile(
        `${process.cwd()}/tasks.json`,
        'utf8',
        (err, data) =&gt; {
          const tasks = JSON.parse(data);
          this.ts.set(StateKeys.TASKS, tasks);

          observer.next(tasks);
          observer.complete();
        }
      );
    });
  }
}</textarea><p>From now, the <code>TransferState</code> registry will contain the <code>TASKS</code> entry. The registry will be passed along with the rendered view to the browser!</p><h3><a name="the-browser-side" id="the-browser-side">The browser side</a></h3><p>Now on the browser side, we need to configure it to read from the <code>StateKey</code>s if they exist.</p><p>To do this, we inject the <code>TransferState</code> service, and then update <code>getTasks()</code> to retrieve data from the <code>TransferState</code> registry or fall back to an HTTP request when the registry is empty:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-kttlgSnFNgBEUmh9eyzNi" id="cm-kttlgSnFNgBEUmh9eyzNi">export class TasksService {
  constructor(
      private http: HttpClient, 
      private ts: TransferState) {}

  public getTasks(): Observable&lt;string[]&gt; {
    if (this.ts.hasKey(StateKeys.TASKS)) {
      return of(this.ts.get&lt;string[]&gt;(
          StateKeys.TASKS, [])).pipe(
        tap(() =&gt; this.ts.remove(StateKeys.TASKS))
      );
    } else {
      return this.http.get&lt;string[]&gt;('/tasks');
    }
  }
}</textarea><h3><a name="testing-the-transferstate" id="testing-the-transferstate">Testing the TransferState</a></h3><p>Now if we navigate to our app, we can verify in the <em>Network</em> tab of the <em>Developer Tools</em>:</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201130045408677_browser2.jpg" attachmentid="ff6a49bd-0835-4295-b26a-43b1bca7f500" contenteditable="false" data-width="1697" data-height="1045"><div></div></figure><p>And if we hit the <strong>refresh list</strong> button and we would see that the new list is retrieved via HTTP, rather than from the <code>TransferState</code>.</p><h2><a name="summary" id="summary">Summary</a></h2><p>Above is a quick introduction to the ideas, but of course, there are specific things you need to do to implement it for real. We walk through those details in the course. You can <a href="https://www.newline.co/courses/newline-guide-to-angular-universal/?code=nglaunch" rel="noopener noreferrer nofollow">grab your copy here </a>OR as part of a <a href="https://newline.co/pricing" rel="noopener noreferrer nofollow">newline pro membership</a>. </p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201130050008463_angular-universal-hero-1.jpg" attachmentid="5a9e8f72-ad26-4074-9a0f-fb09d2ab2d9e" contenteditable="false" data-width="600" data-height="338"><div></div></figure><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Using Node.js in Angular and TransferState

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript