Bootstrap in Angular 4 and 5 app root

What Is Bootstrapping in Angular ? Angular 9, 8, 7, 6

What Is Bootstrapping (bootstrap) in Angular?
The Bootstrap is the root AppComponent that Angular creates and inserts into the “index.html” host web page.
<body>
  <app-root></app-root>
</body>

index.html -
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</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>


You can put more than one component tree on a host web page, that's not typical. Most of the applications have only one component tree and they bootstrap a single root component and you can call the one root component anything you want but most developers call it AppComponent.

The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM).
ü  Stayed Informed - Angular 4 and Angular 5

The Angular Module (NgModules) helps us to organize an application into connected blocks of functionality.

The NgModule properties for the minimum “AppModule” generated by the CLI which are follow as -
ü  Declarations — Use to declare the application components.
ü  Imports —Every application must import BrowserModule to run the app in a browser.
ü  Providers — There are none to start.
ü  Bootstrap — This is a root AppComponent that Angular creates and inserts into the index.html host web page.

app.module.ts -
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    SignupComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


By default Bootstrap file is created in the folder “src/main.ts” and “main.ts” file is very stable. Once you have set it up, you may never change it again and its looks like -

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));


I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

What Is Bootstrapping in Angular ? Angular 9, 8, 7, 6 What Is Bootstrapping in Angular ? Angular 9, 8, 7, 6 Reviewed by Anil Singh on 10:52 PM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^