Issue
A typical root module in angular 4 looks like this
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In the documentation, it is mentioned "In the example of the simple root module above, the application module needs material from within that browser module. To access that material, add it to the @NgModule metadata imports like this."
imports: [ BrowserModule ],
My questions are:
What does "the application module needs material from within that browser module" mean?
What is the difference between this import import { BrowserModule } from '@angular/platform-browser';
and this one imports: [ BrowserModule ],
?
Could someone please help me understand the purpose of using imports
in the root module?
Solution
What does "the application module needs material from within that browser module" mean?
It can mean several things. First, it may mean that browser
module defines some providers that need to be provided be the global injector. It can also mean that components defined in the root module will use some declarable types from browser
module. Actually, if you look at BrowserModule
definition you will that it's both:
@NgModule({
// global providers
providers: [
BROWSER_SANITIZATION_PROVIDERS,
{provide: ErrorHandler, useFactory: errorHandler, deps: []},
{provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true},
...
],
// declarable types - components/directives/pipes
// declared in common and application modules
exports: [CommonModule, ApplicationModule]
})
export class BrowserModule {
I suggest you read Avoiding common confusions with modules in Angular
What is the difference between this import
import { BrowserModule } from '@angular/platform-browser';
and this oneimports: [ BrowserModule ]
The difference is that the former imports ESM
module and the latter imports Angular module. ESM/Typescript modules have nothing to do with Angular modules.
Answered By - Max Koretskyi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.