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.
- 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.
- To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angularjs Online Course
"apps": [{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": ["styles.css"],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}],- 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.
- If you open the main.ts file, you will find the code like below
- Take your career to new heights of success with Angular Online Training
import {
enableProdMode
} from '@angular/core';
import {
platformBrowserDynamic
} from '@angular/platform-browser-dynamic';
import {
AppModule
} from './app/app.module';
import {
environment
} from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); - We have imported “PlatformBrowserDynamic” component and with the help of “BootstrapModule”, we are loading our “AppModule” component.
- Now, open your “AppModule” component and in “NgModule” directive, we have defined the component that will be rendered.
- Get More Information on Angular Training
import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule
} from '@angular/core';
import {
AppComponent
} from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
}) - We can see that in “Bootstrap”, we have passed the “AppComponent” so this will be rendered in our browser.
- Open the “AppComponent” component and check the selector name provided there. Here, it is “app-root”.
- Take your career to new heights of success with Angularjs Online Training
import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportclassAppComponent {
title = 'app';
} 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.
<!doctype html>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>MyApp</title>
<basehref="/"> <metaname="viewport" content="width=device-width, initial-scale=1">
<linkrel="icon"type="image/x-icon"href="favicon.ico"> </head> <body>
<app-root></app-root>
</body>
</html> Hope this article helps you!
Biztalk Online Training 