Post
Ask Question

Angular - Request Life Cycle

The purpose of this article is to explain how your request gets processed in Angular 4, what is the entry point for all Angular requests, and who loads your first page.

  1. Whenever you run your Angular 4 project, how does the browser know which component to call first? Well, that is mentioned in your .angular-cli file.
    1. "apps": [{  
    2.     "root": "src",  
    3.     "outDir": "dist",  
    4.     "assets": ["assets", "favicon.ico"],  
    5.     "index": "index.html",  
    6.     "main": "main.ts",  
    7.     "polyfills": "polyfills.ts",  
    8.     "test": "test.ts",  
    9.     "tsconfig": "tsconfig.app.json",  
    10.     "testTsconfig": "tsconfig.spec.json",  
    11.     "prefix": "app",  
    12.     "styles": ["styles.css"],  
    13.     "scripts": [],  
    14.     "environmentSource": "environments/environment.ts",  
    15.     "environments": {  
    16.         "dev": "environments/environment.ts",  
    17.         "prod": "environments/environment.prod.ts"  
    18.     }  
    19. }],  
  2. In your apps array, there is a "main" key and we have passed "main.ts" file here. So, this will be the first TS file that will get hit.

  3. If you open the main.ts file, you will find the code like below.
    1. import {  
    2.     enableProdMode  
    3. } from '@angular/core';  
    4. import {  
    5.     platformBrowserDynamic  
    6. } from '@angular/platform-browser-dynamic';  
    7. import {  
    8.     AppModule  
    9. } from './app/app.module';  
    10. import {  
    11.     environment  
    12. } from './environments/environment';  
    13. if (environment.production) {  
    14.     enableProdMode();  
    15. }  
    16. platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));  
  4. We have imported "PlatformBrowserDynamic" component and with the help of "BootstrapModule", we are loading our "AppModule" component.

  5. Now, open your "AppModule" component and in "NgModule" directive, we have defined the component that will be rendered.
    1. import {  
    2.     BrowserModule  
    3. } from '@angular/platform-browser';  
    4. import {  
    5.     NgModule  
    6. } from '@angular/core';  
    7. import {  
    8.     AppComponent  
    9. } from './app.component';  
    10. @NgModule({  
    11.     declarations: [  
    12.         AppComponent  
    13.     ],  
    14.     imports: [  
    15.         BrowserModule  
    16.     ],  
    17.     providers: [],  
    18.     bootstrap: [AppComponent]  
    19. })  
  6. We can see that in "Bootstrap", we have passed the "AppComponent" so this will be rendered in our browser.

  7. Open the "AppComponent" component and check the selector name provided there. Here, it is "app-root".
    1. import {  
    2.     Component  
    3. } from '@angular/core';  
    4. @Component({  
    5.     selector: 'app-root',  
    6.     templateUrl: './app.component.html',  
    7.     styleUrls: ['./app.component.css']  
    8. })  
    9. exportclassAppComponent {  
    10.     title = 'app';  
    11. }  
  8. Now, if you open your Index.html file, the app-root will be available there. Your browser will render the index.html page that contains the app component HTML.
    1. <!doctype html>  
    2. <htmllang="en">  
    3.   
    4.     <head>  
    5.         <metacharset="utf-8">  
    6.             <title>MyApp</title>  
    7.             <basehref="/"> <metaname="viewport" content="width=device-width, initial-scale=1">  
    8.                 <linkrel="icon"type="image/x-icon"href="favicon.ico"> </head> <body>  
    9.           <app-root></app-root>  
    10.       </body>  
    11. </html>  
Hope this article helps you! 
Next Recommended Reading Differences Between Angular 1.x & Angular v2