Email: info@zenconix.com

How Angular Application starts?

Published on: 10/6/20 11:12 AM

Category:Angular Angular 10 Code Tags: , ,

In this post we are going to take look on how angular application starts.

For any angular application, entry point is index.html. In index.html file there is tag called as <app-root>

<!--index.html-->

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">

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

In main.ts file <app-root> selector is picked up by the AppModule.

Below is code snippet from main.ts file 

//main.ts 

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

AppModule is module which is bootstrapped this means specified module is going to load first in our angular application.

AppModule can be found in app folder (AppName/src/app/app.module.ts)

In app.module.ts file, we need to specify bootstrap array. Component listed here are automatically added as entry component.

As shown in code below App component is bootstrapped, so App Component will be added as entry component.

//bootstrap: [AppComponent]

Below is app.module.ts file for reference, there you can see AppComponent is bootstrapped. 
//app.module.ts

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [
    BrowserModule,

    HttpClientModule,
    AppRoutingModule,
    StoreModule.forRoot(fromapp.appReducer),
    EffectsModule.forRoot([AuthEffects,RecipeEffects]),

    SharedModule,
    CoreModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

App Component will have same selector as <app-root> ,which is specified in it’s app.component.ts file. In app.component.ts file, inside the component decorator selector is specified as "app-root"

//app.component.ts

import { Component} from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent  {}

Therefore, template of this component specified in templateUrl will be rendered in index.html i.e. app.component.html

In this way angular application starts, please let me know in comment section below if you have any question.

Happy Coding !!

10 thoughts on "How Angular Application starts?"

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Learn C# – Namespaces

What is Namespaces in C#? C# Programs are organized using namespaces. Namespaces are used to add separation of Code in C#. Namespaces can have following members inside it. Namespaces (nested) Classes Interface Delegates Structures Why to use Namespaces? Code Separation: With help of Namespaces, you can separate out set of code in C# Project.Example: if […]

Steps by step procedure to connect the database to Lumen

Create database in phpmyadmin Open .env file. NOTE: if .env file is with name, .env.sample, then rename it to .env Change following parameter in file DB_DATABASE=lumen DB_USERNAME=root DB_PASSWORD= Also check for following parameters if they are different than default setting DB_HOST=127.0.0.1 DB_PORT=3306 Next, as we are going to use Eloquent ORM, we need to un-comment […]

Laravel – How to create Seed users

Create migration file to create new users table To create migration, open command prompt and execute following command php artisan make:migration create_users_table This will create new file in database/migration folder by name datatime_create_users_table.php Open file and modify as below. <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; use Illuminate\Support\Facades\Hash; class CreateUsersTable extends Migration { /** * […]