Today I learned that you can create monorepo workspaces with Angular.
I’ve always used nx, but if you don’t want to use a third-party tool, the built-in Angular capabilities might be enough.
Angular Workspaces
ng new my-workspace --no-create-application
cd my-workspace
If you use pnpm:
pnpm dlx @angular/cli new my-workspace --no-create-application --package-manager pnpm
cd my-workspace
This creates the following directory structure:
.
├── README.md
├── angular.json
├── node_modules
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json
Now you can create new applications like so:
ng generate application my-first-app
For pnpm:
pnpm dlx @angular/cli g application my-first-app
Or libraries:
pnpm dlx @angular/cli g lib my-first-lib
Here is an example folder structure with a dashboard app and a shared-ui library:
.
├── README.md
├── angular.json
├── package.json
├── pnpm-lock.yaml
├── projects
│ ├── dashboard
│ │ ├── src
│ │ │ ├── app
│ │ │ ├── assets
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ └── styles.scss
│ │ ├── tsconfig.app.json
│ │ └── tsconfig.spec.json
│ └── shared-ui
│ ├── README.md
│ ├── ng-package.json
│ ├── package.json
│ ├── src
│ │ ├── lib
│ │ └── public-api.ts
│ ├── tsconfig.lib.json
│ ├── tsconfig.lib.prod.json
│ └── tsconfig.spec.json
└── tsconfig.json
Now you can easily import components from the shared-ui in your dashboard app.
Another option is to use npm workspaces or pnpm workspaces. I found a good tutorial for creating a workspace with pnpm, so I won’t rehash it here.
If you use an npm/pnpm workspace together with Angular workspaces, you should take care to let Angular handle the Angular parts and npm/pnpm to handle the parts.
Why?
npm expects that the output of the build folder is in the same folder as the library. But if you create an Angular library, the output of the build will be in the main dist folder. This confuses npm.