Nx Angular monorepo

A practical example using Nx for Angular monorepo.

Published: 7/29/2024

• https://nx.dev/getting-started/tutorials/angular-monorepo-tutorial

Create the Nx workspace#

npx create-nx-workspace@latest {project folder} --preset=angular-monorepo

npx create-nx-workspace@latest nx-workspace --preset=angular-monorepo

• Application name: Angular app will be created by this name
• Bundler: esbuild is faster and simpler than webpack
• Test runner: Playwright is more complex and potentially slower, but it’s more capable and supports more languages than only JS/TS

Serve an app by name#

nx serve {project name}

nx run {project name}:serve

• both commands do the same thing
• serve is the task name

Generate another Angular app#

ng g @nx/angular:application

• complete the questionnaire Alternatively

nx g @nx/angular:app {project name} --directory={project folder} --dry-run

• Dry run will output to terminal but not change the project

Generate library for app#

• Group functionalities that can be shared throughout

nx g @nx/angular:library shared-ui --directory=libs/shared/ui --standalone

nx g @nx/angular:lib shared-ui --directory=libs/shared/ui --buildable --add-tailwind --standalone

• Move: https://nx.dev/nx-api/workspace/generators/move

Generate a component#

nx g @nx/angular:component button --directory=libs/shared/ui/src/lib/button

Generate a service#

nx g @nx/angular:service services/my --project=ionic-companion

• In apps/ionic-companion/src/app/services my.service.ts

---

Storybook#

Post initial setup

# Generate stories for newly created components
nx g @nx/angular:stories --project=shared-ui

# Run
nx run shared-ui:storybook 

---

Add an Ionic Angular app#

• Issue: Sets up the app to use not standalone components
• This process supports multiple Ionic Capacitor project, I tested it. This is a benefit over Angular workspaces, which only support 1.

Install necessary packages#

npm install @ionic/angular
npm install --save-dev @nxext/ionic-angular

Generate the Ionic Angular app using the ‘@nxext/ionic-angular’ package#

nx generate @nxext/ionic-angular:app {project name}

nx generate @nxext/ionic-angular:app my-ionic

• https://nxext.github.io/nx-extensions-ionic/docs/ionic-angular/getting-started.html

Build the app#

nx run {project name}:build

nx run my-ionic:build

Capacitor#

• https://nxext.github.io/nx-extensions-ionic/docs/ionic-angular/capacitor.html

Add native platform#

nx run {project name}:add:ios
nx run {project name}:add:android
nx run {project name}:add --platform {native platform}

nx run my-ionic:add:ios

Copy build output#

nx run {project name}:copy:ios
nx run {project name}:copy:android
nx run {project name}:copy --platform {native platform}

nx run my-ionic:copy:ios

Sync build output and dependencies#

nx run {project name}:sync:ios
nx run {project name}:sync:android
nx run {project name}:sync --platform {native platform}

nx run my-ionic:sync:ios

Open native platform#

• Can skip directly to ‘run’, instead of opening the project in Xcode/Android Studio

nx run {project name}:open:ios
nx run {project name}:open:android
nx run {project name}:open --platform {native platform}

nx run my-ionic:open:ios

Emulate#

nx run {project name}:run:ios
nx run {project name}:run:android
nx run {project name}:run --platform {native platform}

nx run my-ionic:run:ios