Angular 4 root module 'import' and 'imports'

Question

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?

Answer 1

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 one imports: [ 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.