Angular 2 - Part 5 [ How Angular App get started ]

How Angular 2 App get started?
Angular 2 is a single page app and will contains only one file called index.html in the root folder. although this html file doennot even contains any js files then how the fuck it get started:

Index file
<!doctype html>
  <meta charset="utf-8">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Well when we compile and run the app then the angular-cli will dynamically add the required js files in the page. Which we can see the source in the page while its running

Well then where the fuck is our code?
The answer is it all we be inside the main.bundle.js file

here is the flow
  1. At first the angular app will always use main.ts file which will bootstrap the our app and create a js file at the run time. Inside teh main.ts file we have


    Which will load the AppModule from the module inside the app directory after importing it using

    import { AppModule } from './app/'; 
  2. Then the app will use the app.module.ts inside the app dir which will again bootstrap the AppComponent which we have created earlier in this series.

    bootstrap: [AppComponent]
  3. The Main this about angular 2 is that it will not load all the component at the beginning. It will only load the component which is in the index.html file which is app-root in our case. Its a lazy loading which will increase the performance.
  4. So the main flow is
    main.ts -> load the main module used in the index.html -> the main module will bootstrap the Component -> then main.ts will bootstrap the app and create a single main.bundle.js and add it to the main page -> then we enjoy :)

    Happy Coding geeks. In the next session we will talk about the AppModules \,,/


  1. Thanks a lot for sharing this admin. I learned a lot from your blog and I have bookmarked this page for my future reference. Share more like this.
    Angularjs Training in Chennai | Angularjs Training | Angularjs course in Chennai

  2. Really very nice blog information for this one and more technical skills are improve,i like that kind of post.


  3. Great information to say the least. I really do appreciate everything so much from this great website.keep sharing more blogs like this.
    IELTS Coaching in chennai

    German Classes in Chennai

    GRE Coaching Classes in Chennai

    TOEFL Coaching in Chennai

    spoken english classes in chennai | Communication training