ES2015 target fails to serve

[mark-buer]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.5.0-beta.1
node: 8.5.0
os: darwin x64
@angular/animations: 4.4.3
@angular/cdk: 2.0.0-beta.11
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/material: 2.0.0-beta.11
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.5.0-beta.1
@angular/compiler-cli: 4.4.3
typescript: 2.5.2

Repro steps.

ng new --skip-git crash-test-dummy
# then edit tsconfig.json and change target to es2015
ng serve
# load served url in browser, note that the app fails to initialise

The log given by the failure.

Exception observed in browser console:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (<anonymous>)
    at getParentCtor (core.js:1729)
    at ReflectionCapabilities.parameters (core.js:1542)
    at JitReflector.parameters (compiler.js:26622)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15324)
    at CompileMetadataResolver._getFactoryMetadata (compiler.js:15263)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15533)
    at JitCompiler._compileModule (compiler.js:26063)
    at SyncAsync.then (compiler.js:26013)
    at Object.then (compiler.js:1633)

Mention any other details that might be useful.

#7610 made it so that es2015 targets are supported (yay). It achieved that for production builds, but doesn't seem usable since serve builds are now broken!

Within that PR (#7610), if the changes to packages/@angular/cli/models/webpack-configs/common.ts are instead performed entirely within packages/@angular/cli/models/webpack-configs/production.ts, serve and build work as I expect them to.

[prabh-62]

@mark-buer use > ng serve -aot as a workaround for now when targeting es2015.

[mark-buer]

@prabh-62 Thanks!

[filipesilva]

It's unintended that ng serve (without --aot) doesn't work, will look into it.

[filipesilva]

Ok I have bad news about this, it seems that Angular itself on JIT does not work with a es2015 target:

• initial report: "Cannot convert undefined or null to object" when ng serve with fesm15 files angular#15325
• tracking issue: Compiler: Native ES6 support for JIT and AOT angular#15127

So on the CLI side the best we can do is look at ways to alleviate this.

[AmitMY]

@filipesilva That is odd. If I use CLI 1.4.3 it works, but 1.5.0.beta-1 doesn't with the same angular version.
So I guess I don't understand how it is related to angular itself and not the CLI

[filipesilva]

It's because #7610 added real es2015 support to the CLI. 1.4.x didn't truly support es2015.

[marc-wilson]

I see that the workaround for ng serve is to pass along the --aot flag. Is there a workaround for ng test since ng test doesn't have an --aot flag?

[filipesilva]

I don't have a real solution yet but would like to mention a workaround: having multiple applications (https://github.com/angular/angular-cli/wiki/stories-multiple-apps), with different tsconfigs.

This way you can use one for prod builds and another for dev builds. I know it's not pretty but while JIT doesn't support es2015 there isn't a lot that can be done for a real solution.

[ghoullier]

Hi!
The problem continue with @angular/cli#1.5.0

npm i -g @angular/cli@1.5.0
ng new esnext
# Set tsconfig.json target value as "es2015"
ng build --prod

The web app crash with the following error

ERROR TypeError: Cannot read property '_moduleDoBootstrap' of undefined
    at e.donePromise.then (main.687bb3d77a61372fe0a8.bundle.js:1)
    at e.invoke (polyfills.ad37cd45a71cb38eee76.bundle.js:1)
    at Object.onInvoke (main.687bb3d77a61372fe0a8.bundle.js:1)
    at e.invoke (polyfills.ad37cd45a71cb38eee76.bundle.js:1)
    at r.run (polyfills.ad37cd45a71cb38eee76.bundle.js:1)
    at polyfills.ad37cd45a71cb38eee76.bundle.js:1
    at e.invokeTask (polyfills.ad37cd45a71cb38eee76.bundle.js:1)
    at Object.onInvokeTask (main.687bb3d77a61372fe0a8.bundle.js:1)
    at e.invokeTask (polyfills.ad37cd45a71cb38eee76.bundle.js:1)
    at r.runTask (polyfills.ad37cd45a71cb38eee76.bundle.js:1)

[devoto13]

@ghoullier For now you can workaround it by disabling build optimizer ng build --prod --build-optimizer=false. This problem is different than one discussed in this issue, so I created a new one here - #8505.

[blub0hr]

I have the same issue as @ghoullier in my production build.
@devoto13 Is there any disadvantage I need to consider when building and deploying with --build-optimizer=false? Like load speed, app size, etc...?

[devoto13]

@blub0hr You'll get bigger bundle size ~10-30% depending on the application.

[mohammedzamakhan]

any updates??

[filipesilva]

Until Angular itself support ES2015 on JIT, what you can do is always run your ES2015 app in AOT mode (ng serve --aot).

[israel11021989]

I have a problem when I run ng build:
95% emitting index-html-webpack-pluginEACCES: permission denied, mkdir '/Users/itorres/learnangular5/dist'
Error: EACCES: permission denied, mkdir '/Users/itorres/learnangular5/dist'

[alan-agius4]

I have tried this with the latest CLI and Angular 7 and it looks like it's working.

If the problem persists, please open a new issue following our submission guidelines.

A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[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.}