Angular Nx project with all relevant changes in recent years. Practical examples of all new features to show some examples of the framework evolution. Based on the ebook https://houseofangular.io/the-ultimate-guide-to-angular-evolution/
- ✔️ Standalone API (developer preview)
- Typed forms
- ✔️ Inject function
- CDK Dialog and Menu
- Setting the page title
- ENVIRONMENT_INITIALIZER Injection Token
- Binding to protected component members
- Angular extended diagnostics
- ✔️ ESM Application Build (experimental)
- ✔️ Typescript/Node.js support
- ✔️ Standalone API (Stable)
- Directive composition API
- Image directive
- MDC-based components
- CDK Listbox
- Improved stack traces
- Auto-imports in language service
- ✔️ Typescript/Node.js support
- Signals library (developer preview)
- SSR Hydration (developer preview)
- ✔️ Vite-powered dev server
- Required inputs
- Input transform function
- Router data input bindings
- Injectable DestroyRef and takeUntilDestroyed
- ✔️ Self-closing tags
- runInInjectionContext
- ✔️ Standalone API CLI support
- ✔️ Typescript/Node.js support
- Signals library (stable)
- Signal inputs
- New control flow (Developer preview)
- Deferred loading (developer preview)
- Inputs Binding with NgComponentOutlet
- Animation lazy loading
- View Transitions
- ✔️ Esbuild + Vite (stable)
- SSR Hydration (stable)
- CLI improvements
- Devtools Dependency Graph
- ✔️ Typescript/Node.js support
Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Run npx nx serve recepies
to start the development server. Happy coding!
Run npx nx build recepies
to build the application. The build artifacts are stored in the output directory (e.g. dist/
or build/
), ready to be deployed.
To execute tasks with Nx use the following syntax:
npx nx <target> <project> <...options>
You can also run multiple targets:
npx nx run-many -t <target1> <target2>
..or add -p
to filter specific projects
npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json
or projects.json
. Learn more in the docs.
Nx comes with local caching already built-in (check your nx.json
). On CI you might want to go a step further.
Run npx nx graph
to show the graph of the workspace.
It will show tasks that you can run with Nx.