components: Dependency injection does not work with es2015 target

Bug, feature request, or proposal:

Bug

What is the expected behavior?

mat-sidenav should Initialize without error

What is the current behavior?

Using target: es5 everything works normal (using --prod --aot --build-optimizer and in dev mode) When target is set to es2015 error is thrown:

Cannot read property 'create' of undefined
    at MatSidenav.ngAfterContentInit (sidenav.js:268)
    at callProviderLifecycles (core.js:10333)
    at callElementProvidersLifecycles (core.js:10310)
    at callLifecycleHooksChildrenFirst (core.js:10294)
    at checkAndUpdateView (core.js:11422)
    at callViewAction (core.js:11769)
    at execComponentViewsAction (core.js:11701)
    at checkAndUpdateView (core.js:11425)
    at callWithDebugContext (core.js:12592)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:12182)

What are the steps to reproduce?

<mat-sidenav-container class="view"  fxLayout="column" >
        <mat-sidenav  #leftsidenav (opened)="onLeftOpened($event)" 
           (closed)="onLeftClosed($event)" class="left"  position="start"  mode="over">
             <ui-view name="left"></ui-view>
        </mat-sidenav>
</mat-sidenav-container>

What is the use-case or motivation for changing an existing behavior?

To work using target: es2015

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.5.0
Node: 8.7.0
OS: linux x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.4.2
webpack-bundle-analyzer: 2.9.0
webpack: 3.8.1

Is there anything else we should know?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 15 (7 by maintainers)

Most upvoted comments

I just looked into this issue again.

As I mentioned previously, the issue with the ES2015 mode when serving the application in combination with the build-optimizer in AOT mode has been fixed by the UglifyJS update.

For unit tests, the AOT mode is not supported, and the metadata files won’t be read. This means that Angular runs in JIT mode and needs to figure out the ctorParameters and the inheritance itself. Unfortunately this is not supported and therefore the tests won’t run in JIT ES2015 mode.

To summarize:

ES2015 with AOT : works
ES2015 with JIT : doesn’t work (see https://github.com/angular/angular/issues/15127 and https://github.com/angular/angular-cli/issues/7797)

Closing this issue (again), because everything works as intended on our side.

devversion on Dec 28, 2017

Thank you for the clarification and issue links, Paul! 🙇

I’m working around the testing issues in the meantime by configuring a second Angular CLI app, and setting "tsconfig": "tsconfig.spec.json" with tsconfig.spec.json explicitly targeting ES5 ("target": "es5"), per Felipe’s suggestion.

Not pretty, but good enough for now. Thanks again!

byrondover on Jan 3, 2018

Still having this issue with MatSidenav

Angular CLI 1.6.2, uglify-es@3.2.2 Changing target ES actually does not matter at all. Tried all between ES2015, ES2016, ES2017, ESNext

ERROR TypeError: Cannot read property 'isBrowser' of undefined
 at MatSidenav.ngAfterContentChecked (sidenav.js:315)
 at callProviderLifecycles (core.js:10646)
 at callElementProvidersLifecycles (core.js:10617)
 at callLifecycleHooksChildrenFirst (core.js:10600)
 at checkAndUpdateView (core.js:11750)
 at callViewAction (core.js:12097)
 at execComponentViewsAction (core.js:12029)
 at checkAndUpdateView (core.js:11752)
 at callViewAction (core.js:12097)
 at execComponentViewsAction (core.js:12029)

MarcoHeumann on Dec 26, 2017

This does not appear to fully resolved yet. Using an empty material table:

TypeError: Cannot read property 'nativeElement' of undefined
    at new CdkTable (table.js:438)
    at new MatTable (table.js:26)
    at createClass (core.js:10379)
    at createDirectiveInstance (core.js:10226)
    at createViewNodes (core.js:11686)
    at callViewAction (core.js:12120)
    at execComponentViewsAction (core.js:12029)
    at createViewNodes (core.js:11714)
    at createRootView (core.js:11575)
    at callWithDebugContext (core.js:12941)

with angular cli 1.6.1, target es2015, uglify-es@3.2.2.

fnimick on Dec 18, 2017

Can confirm issue is resolved! Thanks @DevVersion

15% smaller main.bundle 10% shorter app load time (to first app state)

with es2015 on Cordova Crosswalk 23 Android

kdcro101 on Nov 29, 2017