In previous article i have showed how to create your first Angular 4 application, this time we will take a look about how this is working in the background.
The below figure shows an example for an Angular 4 folder structure, let us just concentrate on three files which will explain the whole mystery
Since Angular is a single page application the index.html will work as the main loading page, as you see in the above figure the index.html is showing <app-root>Loading...</app-root>, <app-root> here is reserving that place for whatever code called <app-root>, here comes the role of the next file.
Below figure shows a highlighted selector property "selector:'app-root'" which is setting the name of the selector inside that typescript file, so the previous index.html will look for a selector name to grab and then based on the file
This file has the html which will be replacing the reserved part in the first index.html <app-root> , this selector name can be replaced to whatever name you want to use.
#1 In the index.html between the tags we used there was <app-root>Loading....</app-root>, this loading text can be replaced by any text to be used while loading that selector components
#2 main.ts "below figure" is used to load whatever app module components from app.module.ts and load those modules or scripts inside the loaded html in the browser.