One-step workflow to create a lazy-loaded module and its feature component.

With Angular announcing recently that it could create an alternative to modules in the future, I have noted that a lot of devs seem to dislike the concept of NgModules. I am one of the very few that have come to love them. I find they are explicit and once you learn their intricacy, pretty simple to work with. One of the reasons that make this possible for me is the use of a very simple workflow offered by Angular CLI.

Let’s pretend you want to create a lazy-loaded shop page. Good practice requires that pages other than the home page should be lazy-loaded. We can create it directly in the terminal with the following command: ng g m shop — module app — routing true — route shop

Looking at the terminal, we learn a few things are happening:

• A folder with the shop name is getting created in the pages folder.
• A shop component has been created inside it.
• A shop module has been created and the component is declared by Angular for you.
• A shop routing module has been created (in case you have needs for sub route later) and the shop component has been declared as its home route.

• The app routing module has been updated with a lazy loaded route to your new shop module.

This one line of command does a lot for you and makes it so much easier when you work with Angular. I hope this is going to help you work NgModules before a better approach comes out!

Let me know if you have a better workflow than this one!