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.