Import Libraries into the Angular Applications

All libraries that we generate automatically have aliases created in the root-level tsconfig.base.json.

{
  "compilerOptions": {
    ...
    "paths": {
      "@angular-monorepo/orders": ["libs/orders/src/index.ts"],
      "@angular-monorepo/products": ["libs/products/src/index.ts"],
      "@angular-monorepo/shared-ui": ["libs/shared/ui/src/index.ts"]
    },
    ...
  },
}

Hence we can easily import them into other libraries and our Angular application. As an example, let’s use the pre-generated ProductsComponent component from our libs/products library.

You can see that the ProductsComponent is exported via the index.ts file of our products library so that other projects in the repository can use it. This is our public API with the rest of the workspace. Only export what’s really necessary to be usable outside the library itself.

export * from './lib/products/products.component';

We’re ready to import it into our main application now. First (if you haven’t already), let’s set up the Angular router. Remove the app-nx-welcome component from app.component.html:

<router-outlet></router-outlet>

Then we can add the ProductsComponent component to our app.routes.ts and render it via the routing mechanism whenever a user hits the /products route.

import { Route } from '@angular/router';
import { NxWelcomeComponent } from './nx-welcome.component';

export const appRoutes: Route[] = [
  {
    path: '',
    component: NxWelcomeComponent,
    pathMatch: 'full',
  },
  {
    path: 'products',
    loadComponent: () =>
      import('@angular-monorepo/products').then((m) => m.ProductsComponent),
  },
5 collapsed lines
  {
    path: 'orders',
    loadComponent: () =>
      import('@angular-monorepo/orders').then((m) => m.OrdersComponent),
  },
];

Serving your app (nx serve angular-store) and then navigating to /products should give you the following result:

Let’s apply the same for our orders library. Import the OrdersComponent from libs/orders into the app.routes.ts and render it via the routing mechanism whenever a user hits the /orders route

In the end, your app.routes.ts should look similar to this:

import { Route } from '@angular/router';
import { NxWelcomeComponent } from './nx-welcome.component';

export const appRoutes: Route[] = [
  {
    path: '',
    component: NxWelcomeComponent,
    pathMatch: 'full',
  },
  {
    path: 'products',
    loadComponent: () =>
      import('@angular-monorepo/products').then((m) => m.ProductsComponent),
  },
  {
    path: 'orders',
    loadComponent: () =>
      import('@angular-monorepo/orders').then((m) => m.OrdersComponent),
  },
];

Let’s also show products in the inventory app.

import { Component } from '@angular/core';
import { ProductsComponent } from '@angular-monorepo/products';

@Component({
  imports: [ProductsComponent],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'inventory';
}

<lib-products></lib-products>

Testing and Linting

Our current setup not only has targets for serving and building the Angular application, but also has targets for unit testing and linting. The test and lint targets are defined in the application project.json file. We can use the same syntax as before to run these tasks:

nx test angular-store # runs the tests for angular-store
nx lint inventory # runs the linter on inventory