Anatomy of web request in angular 2

1. When a user access our web application the first file that is downloaded is index.html
2. Index.html has the link and our script tag that our module loader hosts our application. This would be the entry point of our application

   

    Steps involved in the anatomy of web request

    Index.html

System.js

• system.js is responsible for loading third party libraries or our own modules (Loads all our code files for us)
• This is the reason why we do not have to add script reference to our application

       

        This line is responsible for starting our application by loading the ES 2015 module

• The path for the default file load is defined in system.config.js . The file name for it is main.js. It is found under app folder
• The default extension is specified as ".js" this is the reason we  do not have to specify the js extension

    Hosting our angular 2 application

How does the module find the root of our application?

1. system.import('app') in system.config.js is responsible for loading an es module from app folder
2. system.config.js has the entry point defined as main.js . Main is the first es module loaded for our application
3. Main.ts bootstraps our angular module providing us the starting point for us to kick off our application.

    Note

1. We want the angular compiler to compile the application dynamically and then launch the             application.It starts by importing platform-browser-dynamic
2. Second import statement is to find our angular application module
3. Finally we bootstrap our application