Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Root Module File in Angular2 Application A Brief Introduction

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 165
    Comment on it

    AngularJS is an open source free and most popular JavaScript client-side framework which provides a great power to built HTML and JavaScript based web application. Angular 2 is written in typescript and in one big survey it has been clearly said that most of the developers prefers the Typescript framework.



    Anyone with having basic knowledge of Javascript will be easier for him to understand angular. Angular2 is most popular framework in web development community as it include interfaces, component classes, services, routing & modules.


    In this tutorial, I am going to tell you about app.module.ts file which is known as root module file.
    app.module.ts is located in the app folder. So first of all lets understands It's Importance


    Importance of root module file

    Root module file is starting point for our angular applications which is responsible to assemble our application. Every custom component should be referred in app.module.ts because this file also loads the custom components and other parts of our application and as it's responsiblity.

    for example: If we create login component -> login.component.ts

    then, this login component should be imported in root module. Otherwise login page will not load.

    import { LoginComponent } from '../controller/login.component.ts'

    Path of app.module.ts:  src/app/app.module.ts

    The following code will be present in the app.module.ts file. we can also add our custom component file in this module.

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';  
    import { AppComponent }  from './app.component';  
       imports:      [ ----- ],
       declarations: [ ----- ],
       bootstrap:    [ ----- ]
    export class AppModule { }


    Let see the the above code in explanation:

    (a) import statement is used to import functionality from core classes.
    The first 3 statements are used to import functionality from core modules classes (NgModule, BrowserModule and AppComponent) into app.module.ts which is also known as root module.


    (b) NgModule decorator expects at least 3 properties: imports, declarations and bootstrap.
        (i)  imports:  imports property define an array of modules (for eg: BrowserModule )
        (ii) declarations: declarations property define an array of components, directives and pipes.
        (iii) bootstrap: This property define the root component of our module (i.e app.compoment.ts)


    Root Module File in Angular2 Application  A Brief Introduction

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: