Skip to content

Instantly share code, notes, and snippets.

@AlbertoBasalo
Created May 18, 2023 15:38
Show Gist options
  • Save AlbertoBasalo/6ceba5c40b417c9a02e379eb9fd70ee5 to your computer and use it in GitHub Desktop.
Save AlbertoBasalo/6ceba5c40b417c9a02e379eb9fd70ee5 to your computer and use it in GitHub Desktop.
Nx recipe to generate the scaffolding for a big Angular solution.

Large Ng app with NX

0. Create an empty Nx workspace

npx create-nx-workspace@latest
  --name=your-org-name
  --nxCloud=false
  --preset=apps

0.1. Install angular plugin

cd your-org-name
npm i -D @nx/angular

1. Generate Host App

npx nx g @nx/angular:host shell
--e2eTestRunner=none
--inlineStyle
--inlineTemplate
--prefix=ab
--skipTests
--standalone
--style=css
--unitTestRunner=none

2. Generate Remote App

npx nx g @nx/angular:remote app-one
  --e2eTestRunner=none
  --host=shell
  --inlineStyle
  --inlineTemplate
  --prefix=ab
  --skipTests
  --standalone
  --style=css
  --unitTestRunner=none

3. Generate Feature Lib (auth for example)

npx nx g @nx/angular:library auth
  --changeDetection=OnPush
  --directory=routes
  --flat
  --importPath=@ab/auth
  --inlineStyle
  --inlineTemplate
  --lazy
  --parent=apps/shell/src/app/app.routes.ts
  --prefix=ab
  --routing
  --simpleName
  --skipTests
  --standalone
  --unitTestRunner=none

4. Generate Shared Lib

4.1. UI Lib

npx nx g @nx/angular:library shared/ui
  --changeDetection=OnPush
  --flat
  --importPath=@ab/ui
  --inlineStyle
  --inlineTemplate
  --prefix=ab
  --simpleName
  --skipTests
  --standalone
  --unitTestRunner=none

4.2. Core services Lib

npx nx g @nx/angular:library shared/core
  --flat
  --importPath=@ab/core
  --simpleName
  --skipTests
  --standalone
  --unitTestRunner=none

5. Generate Domain Lib for any app or lib

npx nx g @nx/js:library domain
  --bundler=esbuild
  --directory=/apps/app-one
  --importPath=@ab/app-one-domain
  --minimal
  --unitTestRunner=none

6. Add Tests

npm i -D @nx/cypress
npm i -D @nx/jest

6.1. Add e2e tests for applications

npx nx g @nx/cypress:cypress-e2e-configuration --bundler=webpack --project=shell
npx nx g @nx/cypress:cypress-e2e-configuration --bundler=webpack --project=app-one

6.2. Add component tests for ui or feature libraries

npx nx g @nx/angular:cypress-component-configuration
--project=ui
--buildTarget=shell:build
--generateTests

npx nx g @nx/angular:cypress-component-configuration
--project=auth
--buildTarget=shell:build
--generateTests

6.3. Add unit tests for any lib

npx nx g @nx/jest:jest-project --project=core
npx nx g @nx/jest:jest-project --project=app-one-domain
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment