Getting started
Tutorial
Fundamentals
API
Training
Tutorial total points: 0 / 92

Step 7: Share Code

Awesome! The application is working end to end! However, there is a problem. Both the backend and the frontend define the Todo interface. The interface is in sync now, but in a real application, over time, it will diverge, and, as a result, runtime errors will creep in. You should share this interface between the backend and the frontend. In Nx, you can do this by creating a library.

Run the following generator to create a library:

ng g @nrwl/workspace:lib data

The result should look like this:

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   └── data/
│       ├── src/
│       │   ├── lib/
│       │   │   └── data.ts
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
│       └── tslint.json
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.json
└── tslint.json

Copy the interface into libs/data/src/lib/data.ts.

export interface Todo {
  title: string;
}

Refactor the API

Now update apps/api/src/app/app.service.ts to import the interface:

import { Injectable } from '@nestjs/common';
import { Todo } from '@myorg/data';

@Injectable()
export class AppService {
  todos: Todo[] = [{ title: 'Todo 1' }, { title: 'Todo 2' }];

  getData(): Todo[] {
    return this.todos;
  }

  addTodo() {
    this.todos.push({
      title: `New todo ${Math.floor(Math.random() * 1000)}`
    });
  }
}

Update the Angular Application

Next import the interface in apps/todos/src/app/app.component.ts:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Todo } from '@myorg/data';

@Component({
  selector: 'myorg-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: Todo[] = [];

  constructor(private http: HttpClient) {
    this.fetch();
  }

  fetch() {
    this.http.get<Todo[]>('/api/todos').subscribe(t => (this.todos = t));
  }

  addTodo() {
    this.http.post('/api/addTodo', {}).subscribe(() => {
      this.fetch();
    });
  }
}

Every time you add a new library, you have to restart ng serve. So restart both ng serve api and ng serve todos and you should see the application running.

Quiz

Nx allows you to share code...

  • Between different node apps

  • Between different frontend apps

  • Between frontend and backend apps