Workshops

Modern Angular Architectures: Standalone Components, Nx and more

Trainers:
Manfred Steyer & Michael Egger-Zikes

Wow, what a journey. This year, Angular already turns 6 years old. Of course, during these years it evolved a lot. Hence, it’s time to have a closer look to recently added modern features that allow for more modern, fresh, and lightweight architectures.

In this interactive workshop, we start with investigating the brand-new Standalone Components and migrate an existing Angular-Application to this innovation. We show how they work together with a professional Nx Workspace and Module Federation for building Micro Frontends and dramatically speeding up the build process.

Also, we discuss the new typed Forms and add it to our case study as well. Then, we develop some Nx Generators and Schematics for the Angular CLI allowing us to automate repeating and boring tasks related to the implementation of our architecture.

Furthermore, we introduce the NGRX Component Store as well as some advanced NGRX-Patterns. By the end you have a case study that shows how a modern Angular application can look like.

Technical Prerequisites for the Workshop:

a) Node.js installed
- LTS version or higher
- https://nodejs.org
b) Angular CLI
- npm install -g @angular/cli@latest
c) Test with “npm -v” and “ng v” from the command line whether npm and then Angular CLI work
d) Nx CLI
- npm install -g nx@latest
e) A modern browser like the current Chrome version
f) An IDE with Angular support like Visual Studio Code (free) or WebStorm/IntelliJ (commercial)
g) Optionally install git
- https://git-scm.com
- To clone the repo that I will provide at the begin of the workshop
- Alternatively the ZIP file download would work as well
h) We will use the following internet resources, so they need to be accessible for everyone:
- ANGULARarchitects.io (http://angulararchitects.io)
- npm Registry (https://registry.npmjs.org)
- GitHub (https://github.com)