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.

[Enngage]

Using "bundleDependencies": "all" did help in my case, however I encountered additional problems because some 3rd party libs depend on window parameter. The 'usual' fix for SSR is to use domino in the server.ts file such as:

import {createWindow} from 'domino';
const template = '';
const win = createWindow(template) as any;
(global as any)['window'] = win;
(global as any)['Node'] = win.Node;
(global as any)['navigator'] = win.navigator;
(global as any)['Event'] = win.Event;
(global as any)['KeyboardEvent'] = win.Event;
(global as any)['MouseEvent'] = win.Event;
(global as any)['Event']['prototype'] = win.Event.prototype;
(global as any)['document'] = win.document;

However, when app shell is involved, this doesn't work. I'm able to fix the exception by adding code directly to generated main.js file, but I can't intercept the build process so I can't really use app-shell at all.

Is there a way the fix with domino can be used in app-shell?

[phetw]

@vikerman @alan-agius4 Is there any way to only prerender the app-shell component but prevent the builder from rendering the first route ? This way it won't cause the error if components that contain ES6 library don't render.

[alan-agius4]

@phetw, in this case it doesn't matter which component to render, as it will fail during parsing not execution.

Can someone please verify it this issue is still present in version 9? Thanks.

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in version 9.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}