Difference between 2 imports in Angular

Question

I am an Angular beginner and I don't understand one point. In following code, there are 2 imports for BrowserModule . One is at the second line and another is in the @ngmodule . So what is the difference between them and each roles?

import { NgModule }      from '@angular/core';
**import { BrowserModule } from '@angular/platform-browser';**
import { AppComponent }  from './app.component';

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

Answer 1

The first is the ES6 import, this has nothing to do with Angular specifically. It just means "We need BrowserModule from the @angular/platform-browser package.

The second (passed into NgModule ) is Angular specific. This one tells Angular that the AppModule will be using the tools declared in BrowserModule .