Two Styles of Repo

There are two styles of repos: integrated and package-based. This tutorial shows the integrated style.

You can find more information on the difference between the two in our introduction.

Angular Monorepo Tutorial - Part 1: Code Generation

Contents

Your Objective

For this tutorial, you'll create two Angular applications, an Angular lib for your common components, and a library for your business logic as follows:

Our Workspace Requirements

Creating an Nx Workspace

Run the command npx create-nx-workspace@latest and when prompted, provide the following responses:

~❯

npx create-nx-workspace@latest

1 2 > NX Let's create a new workspace [https://nx.dev/getting-started/intro] 3 4✔ Where would you like to create your workspace? · myorg 5✔ Which stack do you want to use? · angular 6✔ Standalone project or integrated monorepo? · integrated 7✔ Application name · store 8✔ Default stylesheet format · css 9✔ Would you like to use Standalone Components in your application? · No 10✔ Would you like to add routing? · Yes 11✔ Enable distributed caching to make your CI faster · Yes 12
Opting into Nx Cloud

You will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this tutorial, but you can see the introduction to Nx Cloud for more details.

Once the command completes, notice two projects were added to the workspace:

  • An Angular application located in apps/store.
  • A Project for Cypress e2e tests for our store application in apps/store-e2e.
Nx Cypress Support

While we see the Cypress project here, we won't go deeper on Cypress in this tutorial. You can find more materials on Nx Cypress support on the @nx/cypress package page.

Adding Another Application to Your Workspace

Run this command to create your admin app:

~/myorg❯

npx nx g @nx/angular:app admin --directory=apps/admin

1npx nx g @nx/angular:app admin --directory=apps/admin 2 3> NX Generating @nx/angular:application 4 5✔ Would you like to configure routing for this application? (y/N) · false 6[NX] Angular devkit called `writeWorkspace`, this may have created 'workspace.json' or 'angular.json 7[NX] Double check workspace configuration before proceeding 8Skipping admin since apps/admin/project.json already exists. 9CREATE apps/admin/tsconfig.app.json 10CREATE apps/admin/tsconfig.spec.json 11CREATE apps/admin/src/favicon.ico 12CREATE apps/admin/src/index.html 13CREATE apps/admin/src/main.ts 14CREATE apps/admin/src/styles.css 15CREATE apps/admin/src/assets/.gitkeep 16CREATE apps/admin/src/app/app.module.ts 17CREATE apps/admin/src/app/app.component.css 18CREATE apps/admin/src/app/app.component.html 19CREATE apps/admin/src/app/app.component.spec.ts 20CREATE apps/admin/src/app/app.component.ts 21CREATE apps/admin/project.json 22CREATE apps/admin/tsconfig.editor.json 23CREATE apps/admin/tsconfig.json 24CREATE apps/admin/src/app/nx-welcome.component.ts 25CREATE apps/admin/.eslintrc.json 26CREATE apps/admin/jest.config.ts 27CREATE apps/admin/src/test-setup.ts 28CREATE apps/admin-e2e/cypress.config.ts 29CREATE apps/admin-e2e/src/e2e/app.cy.ts 30CREATE apps/admin-e2e/src/fixtures/example.json 31CREATE apps/admin-e2e/src/support/app.po.ts 32CREATE apps/admin-e2e/src/support/commands.ts 33CREATE apps/admin-e2e/src/support/e2e.ts 34CREATE apps/admin-e2e/tsconfig.json 35CREATE apps/admin-e2e/project.json 36CREATE apps/admin-e2e/.eslintrc.json 37
Nx 15 and lower use @nrwl/ instead of @nx/

Nx Generator Syntax

Generating Libraries

To create the common-ui and products libraries, use the @nx/angular:lib and @nx/js:lib generators respectively:

~/myorg❯

npx nx g @nx/angular:lib common-ui --directory=libs/common-ui

1 2> NX Generating @nx/angular:library 3 4[NX] Angular devkit called `writeWorkspace`, this may have created 'workspace.json' or 'angular.json 5[NX] Double check workspace configuration before proceeding 6Skipping common-ui since libs/common-ui/project.json already exists. 7CREATE libs/common-ui/README.md 8CREATE libs/common-ui/tsconfig.lib.json 9CREATE libs/common-ui/tsconfig.spec.json 10CREATE libs/common-ui/src/index.ts 11CREATE libs/common-ui/src/lib/common-ui.module.ts 12CREATE libs/common-ui/project.json 13CREATE libs/common-ui/tsconfig.json 14UPDATE tsconfig.base.json 15CREATE libs/common-ui/jest.config.ts 16CREATE libs/common-ui/src/test-setup.ts 17CREATE libs/common-ui/.eslintrc.json 18
Nx 15 and lower use @nrwl/ instead of @nx/

~/myorg❯

npx nx g @nx/js:lib products --directory=libs/products

1 2> NX Generating @nx/js:library 3 4CREATE libs/products/README.md 5CREATE libs/products/package.json 6CREATE libs/products/src/index.ts 7CREATE libs/products/src/lib/products.spec.ts 8CREATE libs/products/src/lib/products.ts 9CREATE libs/products/tsconfig.json 10CREATE libs/products/tsconfig.lib.json 11CREATE libs/products/project.json 12UPDATE tsconfig.base.json 13CREATE libs/products/.eslintrc.json 14CREATE libs/products/jest.config.ts 15CREATE libs/products/tsconfig.spec.json 16
Nx 15 and lower use @nrwl/ instead of @nx/

You should now be able to see all four projects of our design:

  • store in apps/store
  • admin in apps/admin
  • products in libs/products
  • common-ui in libs/common-ui

What's Next