The Angular 6 Module File

The Angular 6 Module File

Before we tackle components, it's worth looking at the /src/app/app.module.ts file. Oh, and by the way, what is that .ts extension? It stands for TypeScript, and Angular 6 uses TypeScript. In short, TypeScript provides strong type checking on JavaScript.
The app.module.ts file looks 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, and services are added as providers. You will also find yourself adding various imports to the imports array. For instance, when we want to add animations, we will add them here.
If you're a little confused at this point, don't worry. Just understand that this is an important file that you will need to visit routinely. 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. You'll see as a proceed.