CODEWITHSUNDEEP
angular
raj240
raj240

Reputation: 656

Export in a Root Angular Module

Why in an angular application the root module needs to be exported when no other module imports it?

Here is my snippet

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HerosComponent } from './heros/heros.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HerosComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule, FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent, HerosComponent]
})
export class AppModule { }

Upvotes: 0

Views: 701

Answers (2)

billyjov
billyjov

Reputation: 2970

There is a Bootstrap process inside the main.ts. There are many ways to bootstrap an application. The variations depend upon how you want to compile the application and where you want to run it. In the beginning, you will compile the application dynamically with the Just-in-Time (JIT) compiler and you'll run it in a browser. (More about Just-in-time and Ahead-of-time compilation in angular here.)

The recommended place by angular team to bootstrap a JIT-compiled browser application is in a separate file in the src folder named src/main.ts. So the AppModule should be exported in order to use it inside the main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

This code creates a browser platform for dynamic (JIT) compilation and bootstraps the AppModule described above.

The bootstrapping process sets up the execution environment, digs the root AppComponent out of the module's bootstrap array, creates an instance of the component and inserts it within the element tag identified by the component's selector.

source: Angular docs archives

Upvotes: 1

Hendrik Brummermann
Hendrik Brummermann

Reputation: 8312

The AppModule class has a typescript export keyword, because it is imported by main.ts to startup the Angular application:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule( AppModule );

Upvotes: 3

Related Questions