Tech: Top 5 Angular Features That Make Your Development Experiences A Lot Better

These features will make you fall in love with Angular again

Happy New Year! This is my first post of 2021. Last year was challenging for everyone but above all things, I was thrilled and grateful for the fact that tech communities were working extremely hard to deliver better experiences for all developers around the world. It was a great year specifically for Angular community as the Angular team had released 3 major versions(9, 10, 11) in a span of 12 months. In this post, we will look at five old and new features that undoubtedly contribute to making your Angular experiences more exciting.

1. Skip installing node_modules (v. 7)

The first feature I want to introduce was overwhelmingly requested by a lot of developers including myself. When you start generating a new Angular app, for any particular reason, you don’t want to install all dependencies in package.json at the start. Angular CLI allows you to set a flag in ng new command to skip node packages from being downloaded to your local workspace.

ng new --skip-install true NewProjectName

2. New Bundle Breakdown Display (v. 11)

Starting with Angular 11, developers no longer have to wait so long for Angular CLI to build their source codes since the build time has been drastically reduced compared to previous versions. They can also see the bundle sizes in tabular format which makes it more helpful during the development. All the build steps were included there as well.

3. Hot Module Reload 🔥 (v. 11)

One of the most exciting features Angular 11 also offers is Hot Module Reload (HMR). Actually, this is a Webpack feature that is being integrated into Angular ecosystem. For those who are not familiar with HMR, it is a configuration that automatically updates the app when the source code is changed without a full page reload. The feature is truly a time saver especially when you are building a complex page that involves multiple steps since the states of the app will be retained after each update. To enable HMR, include flag -hmr in ng serve command.

ng serve --hmr

💡 TIP: Since HMR is not enabled by default, you can make this happen by updating the start script in package.json. After that, you should run npm start instead to fire ng serve with HMR flag.

"start": ng serve --hmr

In my personal experiences, I found HMR is easy to use; though there’s one shortcoming with HMR enabled during my development. It did not allow me to debug my component codes on the browser. All of my breakpoints had failed to stop after I enable this flag. Therefore I only recommend using HMR for building templates and style sheets only.

4. Error messages (v 11.1)

Some Angular developers especially newbies have told me they got frustrated with Angular because of some exceptions they couldn't resolve which distracted them away from solving their own problems. Some people hesitated to try Angular for the first time because they were scared of being stuck with these errors. Hence, Angular team has spent a significant amount of time in building and organizing docs to help guide developers to the right paths. They also enhance the formatting of the error messages to include links to the developer’s guide in order to help debug the problems.

5. Angular & Internationalization

Lastly, I want to say thank you 🙏 to all contributors who had dedicated their time to translate Angular docs to several languages like Japanese, Russians, Chinese… How awesome it is to see more developers now have access to Angular docs in their native languages.

Final Thoughts

In recent years, Angular framework becomes more active in terms of backlog grooming, defect fixing, and enhancement of developer’s experience. It brings me joy as an Angular developer and as a fan of the framework to see how far we go in achieving greater things in web development. Are you ready to “ng update” your apps?