Angular ngModule

Angular has its own modular system called ngModule, also known as Angular Modules. It is a vital part of every Angular application. In fact, all of the Angular applications have at least one Angular ngModule.

  • It’s simply a class with the ‘@ngModule” decorator
  • Declarations, Imports, Providers and Bootstrap have to be specified here
  • It is usually found in the ‘app.module.ts’
  • Note that Bootstrap and Bootstrap 4 are not equivalent. Bootstrap 4 is the fonted application framework and Bootstrap is the main application view or the root component.

Let’s try to create a basic Component and see how it will be injected on our Angular ngModule. We can do this manually but for this example, let’s use Angular-CLI. In your terminal, type:

> ng g component Dashboard

ngmodule

  • You can see that after loading, Angular-CLI generated the necessary files for the new component
  • Our Dashboard Component was also properly added in our module.
  • Dashboard Component was imported and also properly declared in out @ngModule decorator.

You can also do this to the other Core Components namely Services and Directives. But if you encounter this error, you just need to manually add them to your Angular Module.

ngmodule

  • As you can see Angular-CLI said that CurrencyService was properly generated but not provided.
  • You just have to add it manually to your Angular ngModule.

ngmodule

  • First, import it by import{ServiceName} from ‘ServiceFileDirectory’ then add it to the providers
  • Note that when you do this for Directives, directives need to be declared, NOT provided.

ngmodule

Save your work and you’re done. Your final product should look like the image above. The Component, Services and Directive are properly added in your Angular app using Angular-CLI.

This will be our final code of our NgModule:

On the next tutorial article, we will have a closer look at Components.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.