Overview

This post will go over the most commonly used libraries and why they are needed. These libraries enable features such as binding, reactive forms. animations, and HTTP services.

Why is this important?

A brand new Angular Application created with ng new your-app-name, is configured with the bare minumum libraries. One of the many frustrations I had when learning Angular was not knowing which libraries were required to get most of the features enabled. With the following imports in this article you can build most of the examples from the Angular documentation and in this blog.

A brand new Angular Application comes with the following imports.

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 { }

Root Module

The root module as it is commonly referred to is “App.Module.ts“.

Your folder structure should look like the following. The code for the root component of the application is under src –> app

These are the files created for you to start with. Some may not be there but that is OK we can add them later. This is the root component.

Now lets add 2 components by using the following commands

Note: ng g c is the same as ng generate component

Configure the Root Application Module

Open the apps.module.ts under the “\app” folder and add a few base libraries for browser animations, routing, reactive forms, and http client services.

Copy the following into app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    CompOneComponent,
    CompTwoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    HttpClientModule,
    HttpClientJsonpModule,
    BrowserAnimationsModule,
    FormsModule  

  ],
  providers: [],
  entryComponents: [
      // Material Bottom Sheets and Dialog Entry Components    
 ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Breakdown of the libraries.

NgModule

import { NgModule } from '@angular/core';

The NgModule library is where the @module decorator cis defined. A new Angular app comes with a root module. Additional modules called Feature Modules can be added to modularize your application into multiple sections that can be lazy loaded which will noticeably boost performance. Feature modules can be created for handling authentication, user profile, administrative pages, etc. You can also create a Shared Module that can be imported and shared amongst the Feature Modules.

BrowserModule

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

Exports required infrastructure for all Angular apps. Included by default in all Angular apps created with the CLI new command. Re-exports CommonModule and ApplicationModule, making their exports and providers available to all apps. Copied from Angular Documentation here.

AppComponent

import { AppComponent } from './app.component';

This is the root component which is the first component to be rendered from indext.htmlk. Every new components added will have a similar import. For instance if you run ng generate component home then a new import { HomeComponent } from ‘./home/home.component’ will be appended to the imports.

BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

BrowserAnimationsModule enables the animation capabilities into your Angular root application module. read more about animation here. This library let you programmatically generate CSS style animations with Typescript.

FormsModule & ReactiveFormsModule

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

FormsModule and ReactiveFormsModule enable reactive forms features such as form builder. The is one of many powerful out of the box features that come with Angular. Reactive Forms let you build the rules for the form in the Typescript file, thus giving you easy access to the form field states.

• Pristine
• Dirty
• Touched
• Untouched
• Valid
• Invalid

Also you can create Form Arrays that allow multiple instances of a form inside a parent form. For instance, a dynamic guest list where the user can perform CRUD operations for the invitees, name, age, and phone number inside a parent form with all of the validation features of the reactive form module.

HttpClientJsonpModule & HttpClientModule

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

Configures the dependency injector for HttpClient with supporting services for JSONP. Without this module, Jsonp requests reach the backend with method JSONP, where they are rejected. Referenced from Angular Documentation here. In addition to Dependancy Injection you can tale

AppRoutingModule

AppRoutingModule imports the module routing operations. These are the root routing file apps-routing.module.ts.

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

If you are adding Angular Material and want all of the libraries enabled, please check out the following article on creating a separate module for Material. Link to article.