Thanks to standalone components, Angular applications will no longer need NgModules in future. That makes them more straightforward and lightweight. While the principles behind this new feature are quickly understood, the really interesting question is: How can applications be structured without NgModules?
This question is answered here. After showing the basics and mental model of standalone components (pipes and directives), you will see several approaches for structuring your application and for grouping related building blocks. We also go into edge cases for lazy loading and the use of existing libraries based on NgModules. We discuss the interaction with tree-shakeable providers and how you can convert existing solutions step-by-step into standalone components.
By the end you know, how to improve your architectures with standalone components.
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
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
- 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)
Sign up to receive updates about NG Poland, including workshops, speaker previews, ticket launches, NG Awards, Behind the Code Magazine, CFP details and other exclusive content. We won’t spam you and will only send you emails we genuinely think you’ll find interesting. You can unsubscribe at any time and you can find more information here.