Looking for Angular monorepos?

This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a Angular monorepo setup then check out our Angular monorepo tutorial.

Example repository/nrwl/nx-recipes/tree/main/angular-standalone

Angular Standalone Tutorial - Part 1: Code Generation

Contents

Creating a New 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? · store 5✔ Which stack do you want to use? · angular 6✔ Standalone project or integrated monorepo? · standalone 7✔ Default stylesheet format · css 8✔ Would you like to use Standalone Components in your application? · No 9✔ Would you like to add routing? · Yes 10✔ Enable distributed caching to make your CI faster · Yes 11
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, the file structure should look like this:

1store/ 2├── e2e/ 3├── src/ 4├── tools/ 5├── nx.json 6├── package.json 7├── project.json 8├── README.md 9├── tsconfig.base.json 10└── tsconfig.json 11

There are two projects that have been created for you:

  • An Angular application (store) with its configuration files at the root of the repo and source code in src.
  • A project for Cypress e2e tests for our store application in e2e.

As far as Nx is concerned, the root-level store app owns every file that doesn't belong to a different project. So files in the e2e folder belong to the e2e project, everything else belongs to store.

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.

Generating a component for the store

~/store❯

npx nx g @nx/angular:component shop --project=store

1 2> NX Generating @nx/angular:component 3 4CREATE src/app/shop/shop.component.css 5CREATE src/app/shop/shop.component.html 6CREATE src/app/shop/shop.component.spec.ts 7CREATE src/app/shop/shop.component.ts 8UPDATE src/app/app.module.ts 9
Nx 15 and lower use @nrwl/ instead of @nx/

Nx Generator Syntax

Generating Libraries

To create the cart and shared/ui libraries, use the nx/angular:lib` generator:

~/store❯

npx nx g @nx/angular:library cart

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

~/store❯

npx nx g @nx/angular:lib shared/ui --buildable

1 2> NX Generating @nx/angular:library 3 4UPDATE jest.config.ts 5CREATE jest.config.app.ts 6UPDATE project.json 7CREATE shared/ui/README.md 8CREATE shared/ui/ng-package.json 9CREATE shared/ui/package.json 10CREATE shared/ui/tsconfig.lib.json 11CREATE shared/ui/tsconfig.lib.prod.json 12CREATE shared/ui/tsconfig.spec.json 13CREATE shared/ui/src/index.ts 14CREATE shared/ui/src/lib/shared-ui.module.ts 15CREATE shared/ui/project.json 16CREATE shared/ui/tsconfig.json 17UPDATE tsconfig.base.json 18CREATE shared/ui/jest.config.ts 19CREATE shared/ui/src/test-setup.ts 20CREATE shared/ui/.eslintrc.json 21UPDATE package.json 22 23added 89 packages, removed 17 packages, changed 2 packages, and audited 1515 packages in 27s 24 25201 packages are looking for funding 26 run `npm fund` for details 27 288 low severity vulnerabilities 29 30To address all issues (including breaking changes), run: 31 npm audit fix --force 32 33Run `npm audit` for details. 34
Nx 15 and lower use @nrwl/ instead of @nx/

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

  • store in the root
  • cart in cart
  • shared-ui in shared/ui

What's Next