steps below are for setting up a new project from the scratch.
Explicitly Passing Arguments to Angular CLI
nx/ng commands now accept a delimiter to distinguish the end of options for Nx and the beginning of options to Angular CLI with a (like npm run) according to Guideline 10 of POSIX.2 utility syntax guidelines.
update 3rd party modules/schematics use --allow-dirty--next --force` flags as needed
Tasks
Install Deps
Update Deps
Build
Run
Uint Test
E2E Test
Serve from dist
use this to test service-workers
Check
check if you on current versions.
IntelliJ/WebStorm
Right click on apps/webapp/src/styles in project vie --> Make Directory as --> Resources Root. Right click on apps/webapp/src in project vie --> Make Directory as --> Resources Root. Right click on docs in project view --> Make Directory as --> Excluded. Right click on dist in project view --> Make Directory as --> Excluded. Right click on coverage in project view --> Make Directory as --> Excluded.
npm uninstall -g commitizen
npm uninstall -g @angular/cli
npm uninstall -g @nrwl/cli
npm uninstall -g create-nx-workspace
npm uninstall -g @nestjs/cli
npm uninstall -g bloomrpc-mock
npm install -g lerna
npm install -g commitizen
npm install -g @angular/cli
npm install -g @nrwl/cli
npm install -g @nestjs/cli
npm install -g bloomrpc-mock
# verify globally installed packages
npm -g list
# To see a list of outdated packages
npm outdated
# To update the packages to their latest versions in package.json
ncu -u
# set scss as default css processor
ng config -g defaults.style=scss
ng config -g schematics.@schematics/angular:component.style scss
ng config -g cli.packageManager npm
# (optional) set scss as default style for ngx-formly
ng config -g schematics@ngx-formly/schematics:component.style scss
# check your global defaults
ng config -g
# (optional) how to find reverse dependencies for a package?
npm why jasmine-marbles
ng new yeti -c=@nrwl/workspace --preset=empty --style=scss --npm-scope=yeti --app-name=yeti -v
cd yeti
# set yarn2 for project
# yarn set version berry
# make sure we are up-to-date
ng update --all --allow-dirty --force
# also update versions in package.json
yarn upgrade-interactive --latest
# add nx plugins (schematics)
# you can add more nrwl-nx plugins to your workspace as needed
ng add @nrwl/angular --defaults
ng add @nrwl/nest
ng add @xmlking/nxp-ddd
yarn add -D @jscutlery/semver
nx g @jscutlery/semver:install
# Set workspace defaults
ng config cli.packageManager npm
ng config schematics.@schematics/angular:component.style scss
ng config schematics.@schematics/angular:component.prefix yeti
ng config schematics.@schematics/angular:component.displayBlock true # optional, default `inline`
ng config schematics.@schematics/angular:component.changeDetection OnPush
TODO: move assets and styles to shated
https://github.com/nrwl/nx-examples/tree/master/libs/shared # assets
https://github.com/LayZeeDK/ngx-nrwl-airlines-workspace/tree/master/libs/shared # Env
# generate webapp app
# use fullTemplateTypeCheck or strictTemplates
# ng g @nrwl/angular:app yeti-web-app --routing --style=scss --strict=true --tags="domain:yeti,type:app,platform:web"
ng g @xmlking/nxp-ddd:application yeti --standaloneConfig # optional flags: --platform <web/mobile/desktop/node>
# NOTE: Remove `"types": []` from apps/webapp/tsconfig.app.json to allow global types. ???
# generate api app with nestjs
ng g @nrwl/nest:app yeti-api --frontend-project=yeti-app --linter=eslint --tags="domain:yeti,type:api,platform:node" --standaloneConfig
cd yeti
#---------------------------
# Add i18n
ng add @angular/localize
#---------------------------
# Add PWA
ng add @angular/pwa@next --project webapp
#---------------------------
# Add universal for SSR
ng add @nguniversal/express-engine --clientProject webapp
#---------------------------
# `ng deploy`
# Add architect for deploying webapp
# ng add [provider] [angular-cli-ghpages, @angular/fire, @zeit/ng-deploy, @azure/ng-deploy, @netlify-builder/deploy]
# gh-pages deployment
# ng add angular-cli-ghpages
# firebase deploy
# https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md
ng add @angular/fire # Note: add this, only after adding `@nguniversal/express-engine`
# (optional) Add architect for npm release
ng add ngx-deploy-npm
#---------------------------
# Add ngx-semantic-version (http://d-koppenhagen.de/blog/2019-11-ngx-semantic-version)
ng add ngx-semantic-version
#---------------------------
# Add nebular
ng add @nebular/theme
yarn add @nebular/auth
yarn add @nebular/security
yarn add -D @fortawesome/fontawesome-free
#---------------------------------
#---------------------------
# Add tailwind
yarn add -D @ngneat/tailwind tailwindcss postcss autoprefixer
nx generate @ngneat/tailwind:nx-setup
# FIXME: https://github.com/ngneat/tailwind/issues/94
npx nx generate @ngneat/tailwind:nx-setup --darkMode=media
#---------------------------------
#---------------------------------
# compo docs
ng add @twittwer/compodoc
# adds a `compodoc` target to the specified project in your `angular.json`
ng g @twittwer/compodoc:config <project> [options]
ng g @twittwer/compodoc:config webapp --workspaceDocs
# Generate your docs:
ng run <project>:compodoc
ng run webapp:compodoc
#---------------------------------
# Add ngx-markdown for SSG(Static Site Generator) and Content Management
ng add ngx-markdown
yarn add prismjs
#---------------------------
# Add Flex-Layout
yarn add @angular/flex-layout
#---------------------------
# (optional) Add in-memory-web-api
yarn add angular-in-memory-web-api
#---------------------------------
# Add NGXS manually (prefered)
# We are using NGXS for State Management and [@rx-angular/template](https://github.com/rx-angular/rx-angular/blob/master/libs/template/README.md) for zoneless Rendering System
yarn add @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin}
# (optional) extra ngxs plugins
yarn add @ngxs-labs/immer-adapter
yarn add @ngxs-labs/select-snapshot
yarn add immer
# add `Push Pipe` & `Let Directive` Rendering System
yarn add @rx-angular/template
#---------------------------------
# (optional) Add formly
ng add @ngx-formly/schematics --ui-theme=material
#---------------------------------
# (optional) Add Filepond
yarn add ngx-filepond \
filepond-plugin-file-encode \
filepond-plugin-file-validate-size \
filepond-plugin-file-validate-type \
filepond-plugin-image-crop \
filepond-plugin-image-preview
#---------------------------------
# Add @UntilDestroy() to auto unsubscribe rxjs
yarn add @ngneat/until-destroy
#---------------------------------
# Add gRPC
yarn add google-protobuf
yarn add -D @types/google-protobuf
yarn add grpc-web
yarn add -O grpc-tools
# to generate TS interfaces from proto
yarn add -O ts-proto
yarn add -O grpc_tools_node_protoc_ts
#---------------------------------
# for metagen CLI tool (node tools/scripts/metagen.mjs)
yarn add -O parse-md
# (optional) Add Socket.io
yarn add socket.io-client
yarn add -D @types/socket.io-client
#---------------------------------
ng add @ngneat/dialog
#---------------------------------
#---------------------------------
# add Convoyr plugins
# Enriching HTTP clients with capabilities related to security, performance or resilience
yarn add @convoyr/core
yarn add @convoyr/plugin-auth
yarn add @convoyr/plugin-cache
yarn add @convoyr/plugin-retry
#---------------------------------
# Add miscellaneous
yarn add ngx-perfect-scrollbar smooth-scrollbar ngx-page-scroll screenfull
# Add Dev Tools
# tools you needed in CI/CD inv
yarn add -D loaders.css
yarn add -D api-ai-javascript
yarn add -D codecov
yarn add -D rimraf
# install without saving
yarn add trianglify --no-save --no-lock
#---------------------------------
## bundle analyzer
# yarn add -O webpack-bundle-analyzer
ng add @ngx-builders/analyze
yarn global add source-map-explore # will be removed later
# usage
ng run [YOUR_PROJECT_NAME]:analyze --no-build
# old way
yarn add source-map-explore
ng build --prod --sourceMap
npx source-map-explore dist/**/main*2015*js
#---------------------------------
### Add Optional Tools
# tools you only needed on Dev laptop
yarn add -O lint-staged
# alternative builder for nestjs (optional)
yarn add -D ts-node-builder
yarn workspace @yeti/api add @xmlking/jwks-rsa @nestjsx/crud @nestjs/{terminus,cqrs,passport,swagger,microservices,typeorm}
yarn workspace @yeti/api add nodemon supertest -O
yarn workspace @yeti/api add @types/{helmet,passport,passport-jwt,supertest,nodemailer} -D
yarn workspace @yeti/api add @grpc/proto-loader
yarn workspace @yeti/api add grpc
yarn workspace @yeti/tools add cpx --dev
#Updating Nx
nx migrate latest
#After updating your dependencies, run any necessary migrations.
nx migrate --run-migrations
# ng update --next if needed
ng update @angular/core
ng update @angular/cli
ng update @angular/material
ng update @angular/pwa
ng update @ngx-formly/schematics --ui-theme=material
ng update @nrwl/workspace
ng update @nrwl/angular
ng update @nrwl/nest
ng update @nguniversal/express-engine
yarn
ng update
ng update @angular/cli
ng update @angular/core
ng update --all
# interactively update non-ng modules, with `--latest`
# this will also update package.json file with information of the new versions of the updated packages
yarn upgrade-interactive --latest
# Create a translation source file
ng xi18n --output-path apps/webapp/src/local
ng build api
# start with hugh memory if ndded
NODE_OPTIONS=--max-old-space-size=4096 ng build api --prod
NODE_OPTIONS=--max-old-space-size=4096 ng build webapp --prod
# dev run
ng serve
# run mock mode
ng serve -c=mock
# use proxy (if you have CORS disabled backend API)
ng serve -c=mock --proxy-config proxy.conf.js
# to bind to host IP, to demo from laptop
ng s --host
# ES2015 support: Set tsconfig.json target value as "es2015" and use --aot
ng serve -c=mock
# run prod mode
ng serve -c=prod
# build and run web
docker compose up --build web
# run web
docker compose up web
ng test <module>
ng e2e webapp
# headless tests (CI)
ng e2e webapp --headless
ng e2e webapp --headless --browser chrome
# Production target
ng e2e webapp --prod
# Watching for changes
ng e2e webapp --watch
# 1st terminal - Start the build in (optional) watch mode
ng build --prod --watch
# 2nd in terminal - Start the static web server. this will use config from bs-config.json
npx lite-server
node -v
yarn -v
lerna -v
ng -v
npx nx --version
nest info
# list workspaces
yarn workspaces info