How an Angular App gets going

If you dig into your Angular app, you will find an Index.html file, but you won’t find the normal html on it that you would expect in a normal html app. One important thing you see in that file is an ‘<app-root>Loading… </app-root>’ tag. This is important, and I’ll come back to it.

Let’s look at what Angular is doing to get your pages to appear.

You will see that there is a ‘main.ts’ file in the src folder (along with the index.html file).

The main.ts file is the first thing that gets loaded.

The main.ts file contains a class that tells the app to load AppModule, which is found in app.module.ts file. In main.ts you will see

import { AppModule } from '../app/app.module';

So main now knows that to start, it should look at the file ‘’ (the ‘.ts’ is not in the import statement, but is known by convention).

Now Angular will read ‘’ and will load the item that is in the ‘@NgModule.bootstrap’ property.

(in app.module.ts)
import { AppComponent } from './app.component';
bootstrap: [AppComponent]

Now if you look in the app.component.ts file referenced above, you will see that it is a class that defines a selector and a template (or templateUrl).

(in app.component.ts)
import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app';

Alright. That’s the full circle of events. From all of that, Angular knows to replace the ‘<app-root>..</app-root>’ tag in Index.html with the class and html defined in app.component.ts above.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s