Monorepo with Angular Workspaces

Having a workspace, and generating applications and libraries inside makes sharing of libraries much easier.

Published: 7/2/2024

Create the workspace

ng new my-workspace --no-create-application

Create an application

ng generate application app-my

Create a library

ng generate library lib-my

Convention: prefix application with app- and library with lib-

Run an app

ng serve --project=app-my

Build a library

ng build lib-my

ng build lib-my --watch

ng build --project="lib-form" --watch

Use a component from the library#

Generate a component for the library

ng g c mycomponent --project=my-lib

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

import { MyComponent } from 'lib-my';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MyComponent],
  template: '<lib-my-mycomponent></lib-my-mycomponent>',
  styleUrl: './app.component.scss',
})
export class AppComponent {
}

Enable @ paths for imports#

In workspace root level tsconfig.json.

import { ... } from '@app-ionic/app/...';

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@app-admin/*": ["projects/app-admin/src/*"],
      "@lib-form/*": ["projects/lib-form/src/lib/*"],
      "lib-form": ["./dist/lib-form"]
    },
    ...
  },
  ...
}

Furthermore#

The "lib-form": ["./dist/lib-form"] like could be renamed to "@my-form": ["./dist/lib-form"]. After which the library could be imported both these ways:

import { VaFormComponent, VaFormSchema } from '@my-form';

OR

import { VaFormComponent } from '@lib-form/feature/form/form.component';
import { VaFormSchema } from '@lib-form/data-access/form';