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

1

– It’s simply a class with the ‘@ngModule” decorator
– Declarations, Imports, Providers and Bootstrap has 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 Module. We can do this manually but for this example, let’s use Angular-CLI. In your terminal, type:

2

3

– 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

4

– 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 Module.

5

– 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.

6

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 2 app using Angular-CLI.

On the next article, we will be discussing Creating and Using Components.

 

JOIN THE ANGULAR ACADEMY!
$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.