Angular 2 RC 5 NgModules

Angular Modules, also known as NgModules, are the powerful new way to organize and bootstrap your Angular application. In this screencast we upgrade the ng2play repo to the latest release candidate (RC5).

Screencast

Links

Here are the links related to the screencast.

• Source code
• Live demo
• Angular Teams RC5 announcement
• RC4 to RC5 Migration Guide

Migration Steps

We basically follow the migration steps in the guide, which are:

1. Update to RC5: We do this by simply bumping the versions in packages.json and running npm install.
2. Create an NgModule: Create a root NgModule in app.module.ts that we use to bootstrap our application.
3. Update your bootstrap: Updated main.ts to bootstrap our module instead of our root component.
4. Update your 3rd party libraries: We load up the Forms, Material, Router and Http module in our main app module.
5. Cleanup: Clean up the code by getting rid of repetitive boiler plate code in our Component annotations.

Revisiting Forms

A couple of months ago I did a rant on forms in angular, and finally they are starting to adress some of the issues. For instance it wasn’t possible to reset a form and its validation in earlier versions, which now is possible. We can simply call a reset method on either a form group or a single control.

Conclusion

Modules is definitely something that we needed to be able to get rid of a lot of boiler plate code in our components. Even if my opinion is that it’s a bit late to introduce this in between two release candidates the end result weighs up for it. I’ll try to do a separate screen on lazy loading modules, which is really easy now.

Hope this screencast helped you migrate to RC5 and learn more about modules in Angular.
Until next time, have an excellent day!