What is the purpose of the esm directories in the Angular 2 modules? -

i working angular2 rc4:

    "@angular/common": "2.0.0-rc.4",     "@angular/compiler": "2.0.0-rc.4",     "@angular/core": "2.0.0-rc.4",     "@angular/forms": "0.2.0",     "@angular/http": "2.0.0-rc.4",     "@angular/platform-browser": "2.0.0-rc.4",     "@angular/platform-browser-dynamic": "2.0.0-rc.4",     "@angular/router": "3.0.0-beta.2",     "@angular/upgrade": "2.0.0-rc.4", 

and using jetbrains intellij idea 2016.2. when reference angular2 directives ide helpfully offers import package in directive defined. unfortunately ide finding multiple definitions of directives means have choose correct 1 list provided. choose "wrong" 1 , i'll end large number of compilation errors. i've come learn, wrong package always/normally 1 in angular2 distribution directory containing esm subfolder.

upon inspection of esm folder it's contents closely mimic of sibling src folder (for instance):

@angular   common   + esm     + src       + directives       + facade       + form-deprecated       + location       + pipes         common_directives.d.ts         common_directives.js         common_directives.js.map         common_directives.metadata.json         directives.d.ts         ...         pipes.js         pipes.js.map   + src     + directives     + facade     + form-deprecated     + location     + pipes       common_directives.d.ts       common_directives.js       common_directives.js.map       common_directives.metadata.json       directives.d.ts       ...       pipes.js       pipes.js.map 

question 1: purpose of esm directories , why these provided in distribution?

question 2: angular2 application developer have need of files in these directories?

question 3: if "no" question 2 can safely remove these project and/or there way make intellij idea 2016.2 ignore these folders?

question 1: esm folder contains library written in pure es2015 (or es6) module syntax. there 2 main community created flavours of module in javascript-land, amd , commonjs, es2015 module first time module syntax part of language. code written in es6 modules future-proof: syntax nicer, cyclic dependencies supported , modules export bindings rather values. es2015 module more efficient other formats , can facilitate creation of smaller bundle size through tree-shaking technique, i.e., importing bits need instead of importing whole thing. community has created tools take advantage of es2015 module. example, rollup.js library javascript module bundler uses tree-shaking technique generate smaller bundles.

so, why angular team has included esm distribution? well, although nowadays browsers don't support es2015 syntax, can use tools rollup.js take advantage of es2015 module syntax produce super lean bundle of application.

question 2: said before, can (or must) use esm directory generate smaller bundle of application using rollup.js library example.

question 3: don't need remove anything. esm directory best friend when have generate bundle of application production.

an excellent reference of rollup.js wiki page. take look.

you can read excellent article building , angular 2 application production shows how use rollup.js , tree-shaking.

** bonus **: inspecting package.json of library can see if has included es2015 version. jsnext:main property. more details can read rollup - jsnext:main documentation.