Exploring Module File

Angular 6 Module File

Before we tackle components, it's worth looking at the /src/app/app.module.ts file

Angular 6 uses TypeScript which provides strong type checking on JavaScript.

The file look like this :

           import { BrowserModule } from '@angular/platform-browser';
            import { NgModule } from '@angular/core';

            import { AppRoutingModule } from './app-routing.module';
            import { AppComponent } from './app.component';

            @NgModule({
                     declarations: [
                              AppComponent
                                   ],
                    imports: [
                              BrowserModule,
                               AppRoutingModule
                           ],
                     providers: [],
                     bootstrap: [AppComponent]
                    })
            export class AppModule { }

Whenever you use the CLI to generate components and services, it will automatically update

this file to import and add them to the @NgModule decorator

Components are added to the declarations array

services are added as providers

We will be adding various imports to the imports array. For instance, when we want to add animations, we will add them here.

The CLI will take care of things for the most part, especially when generating components, but when generating services and performing some other tasks, you will need to visit this file.