How does angular-cli work with ES6 modules?

Question

angular-cli uses es6 modules as output format of TypeScript: In tsconfig.json:

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

How is that processed by webpack later on to make it work in es5?

If I understand it correctly, many projects use babel to get es6 modules working, but I have not found any reference to babel inside angular-cli.

I am trying to set up a webpack project from the start, because it turned out that the webpack config that angular-cli uses is just not good/flexible enough for our project.

When I tried to use es6 modules, I ended up with unprocessed "import" statements in my "bundled" js file, so obviously I am doing something wrong.

Answer 1

angular cli uses webpack 2 which supports ESM (es6 modules) So when typescript gets compiled it compiles to es5 but keeps all the import statements as es6 style modules.

then webpack 2 can optimize the es6 modules using static analysis and tree shaking to remove unused pieces of code and unused modules.

So what you probably are doing wrong is using webpack 1 which doesn't support es6 modules.

Answer 2

Ok, so I found out that

• angular-cli uses webpack 2 BETA
• webpack 2 beta has native support for ES6 modules

See What's new in webpack 2

Answer 3

Simply change the target in the tsconfig.json file from es5 to es6, every other stuff like module and lib already support es6.

{

"target": "es6",

}