Angular-cli: 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: https://github.com/angular/angular/issues/15325
• tracking issue: https://github.com/angular/angular/issues/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 https://github.com/angular/angular-cli/pull/7610 added real es2015 support to the CLI. 1.4.x didn't truly support es2015.

[mswilson4040]

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/[email protected]
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 - https://github.com/angular/angular-cli/issues/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[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._}