App-shell devkit builder doesn't support ES6 imports

[ca136]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [x] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node v10.11.0
npm 6.4.1
ng 7.1.2
macOS Mojave / High Sierra

Repro steps

1. create a new project with CLI
2. generate an app-shell with cli schematics ng generate app-shell --client-project shell-error --universal-project shell-error
3. install an es6 lib npm install --save lodash-es
4. add an import to an es6 lib (something from lodash-es in this case)
5. run the app shell builder ng run shell-error:app-shell

The log given by the failure

Unexpected token export
/Users/camsden/shell-error/node_modules/lodash-es/lodash.js:10
export { default as add } from './add.js';
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.lodash-es (/Users/camsden/shell-error/dist/shell-error-server/main.js:625:18)
    at __webpack_require__ (/Users/camsden/shell-error/dist/shell-error-server/main.js:20:30)
    at Module../src/app/app-shell/app-shell.component.ts (/Users/camsden/shell-error/dist/shell-error-server/main.js:223:67)
    at __webpack_require__ (/Users/camsden/shell-error/dist/shell-error-server/main.js:20:30)
    at Module../src/app/app.server.module.ts (/Users/camsden/shell-error/dist/shell-error-server/main.js:423:88)
    at __webpack_require__ (/Users/camsden/shell-error/dist/shell-error-server/main.js:20:30)

Desired functionality

Should be able to build the app shell with es6 imports.

Mention any other details that might be useful

It looks like there might be a webpack loader or a build step missing for the app-shell builder.
https://github.com/ca136/cli-shell-error

[alan-agius4]

Hi, this is due that when building an App-Shell, it uses the server build which needs to be compatible with a Node environment and it happens that ES6 imports aren't.

Unfortunately, lodash doesn't ship a single package that contains both ES and UMD/CommonJS.

Angular CLI itself, doesn't do downleveling of javascript.

[ca136]

The @angular-devkit/build-angular:server builder works fine , it's only the @angular-devkit/build-angular:app-shell builder that has this problem.

[filipesilva]

This is very similar to #12975 (comment), insofar as we do not error if es6 libraries are used when targetting es5.

[alexeagle]

We should bundle the third-party dependencies with webpack so that it transpiles the ESModule syntax

[hansl]

@alan-agius4

Let's meet and decide how to document this and how to setup the app-shell schematics.

[alan-agius4]

I have tried to use "bundleDependencies": "all" however setting this will break the app-shell generation with this error Cannot read property 'subscribe' of undefined

The seems to be related that this._zone.onMicrotaskEmpty will become undefined.

Should be addressed in #12273

[ca136]

What if there was an option to do an app shell build without the server build? For the use-case of pre-rendering the app shell and serving it from a CDN.

[alan-agius4]

@ca136, to generate the app-shell, the code needs to executed by the build pipeline which runs in node, and thus the application needs to be server compatible.

[mgechev]

@vikerman I remember you were looking at this error #13181 (comment). Any updates?

[JWess]

Just ran into this exact issue. Glad to see that it's a known problem. Hopeful for a resolution someday soon.