How does angular-cli work with ES6 modules?

Question

angular-cli uses es6 modules as the output typeScript format: In tsconfig.json:

{ "compilerOptions": { "modules": "es6", "target": "es5", ... 

How is this handled by webpack later to get it working in es5?

If I understand correctly, many projects use babel to run es6 modules, but I did not find a link to babel inside angular-cli.

I am trying to create a webpack project from the very beginning, because it turned out that the webpack configuration used by angular-cli is simply not suitable / flexible enough for our project.

When I tried to use es6 modules, I ended up with raw import operations in my js file bundle, so obviously I'm doing something wrong.

Answer 1

angular cli uses webpack 2, which supports ESM (es6 modules) Therefore, when compiling typescript compiles into es5 but saves all import statements as es6 style modules.

then webpack 2 can optimize es6 modules by static analysis and shaking the tree to remove unused code snippets and unused modules.

So what you are probably doing wrong is using webpack 1, which does not support es6 modules.

Answer 2

So, I found out that

• angular-cli uses webpack 2 beta
• webpack 2 beta has built-in support for ES6 modules.

See What's New in webpack 2

Answer 3

Just change the target in the tsconfig.json file from es5 to es6, all other elements like module and lib already support es6.

{

 "target": "es6", 

}