Dependency injection does not work with es2015 target

[kdcro101]

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?

no

[amcdnl]

@kdomagoj - Did this work at one point or is this a regression? I'd generally advise against using ES2015 compiler target until full browser support has landed and those versions have been adopted widely.

@mmalerba - Looks like the focusTrapFactory isn't getting initialized. https://github.com/angular/material2/blob/master/src/lib/sidenav/drawer.ts#L288

[kdcro101]

@amcdnl
I intend to use es2015 build for cordova(android) app which supports es2015 and for desktops I will build with es5 target.

I was waiting for that feature to be available , and since 1.5 CLI it is.
So after angular 5.0.0 + 1.5 cli upgrade I gave a try with es2015 target.

Everything works fine when built with target es5.

This is first time I experience this issue.

Thanks.

[mmalerba]

It looks like everything that gets injected via DI is undefined, sidenav was just the first thing to throw an error because of it. Will update issue title to reflect the real issue

[jelbourn]

My initial hunch would be that this is something in ngc

[SaturnTeam]

Same error with es2015 and es2016

[devversion]

I tried to reproduce that issue with the latest Angular CLI version, but unfortunately I wasn't able to serve the app with the build-optimizer at all.

• Build optimizer leads to the broken build with AOT and ES2015 angular-cli#8505

There seem to be a lot of issues related to the build-optimizer and the ES2015 target right now. My initial guess was that the build-optimizer removes some important metadata from the ES2015 files, which then causes the Dependency Injection failures.

I will try to manually work-around angular/angular-cli#8505 to be able to reproduce the issue. In meanwhile it would be helpful if someone runs the CLI with --build-optimizer=false.

[devversion]

The issue of the Angular CLI has been resolved with [email protected]. I manually installed [email protected] and everything works fine with the ES2015 TypeScript target now.

[devversion]

I'm closing this issue because it looks like the issue has been resolved with the latest UglifyJS version.

Please let us know if you still see that issue with the latest UglifyJS version.

[kdcro101]

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

[fnimick]

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, [email protected].

[MarcoHeumann]

Still having this issue with MatSidenav

Angular CLI 1.6.2, [email protected]
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)

[byrondover]

Same.
@devversion Please reopen this issue, or help point us in the right direction. ❤️

Angular 5.1.2, Angular CLI 1.6.2, Angular Material 5.0.2, Karma 2.0.0, uglify-es 3.3.2.

Works

"target": "es5" // tsconfig.json

Fails

"target": "es2015" // tsconfig.json

import { TestBed, async } from '@angular/core/testing';
import { MatSidenavModule } from '@angular/material';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [ MatSidenavModule ]
    }).compileComponents();
  }));

  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});

% ng test

[karma]: Karma v2.0.0 server started at http://0.0.0.0:9876/

Chrome 63.0.3239 (Mac OS X 10.12.6): Executed 1 of 1 (1 FAILED) (1.521 secs / 1.303 secs)
TOTAL: 1 FAILED


1) should render title in a link tag
     AppComponent
     Failed: Cannot read property 'create' of undefined
TypeError: Cannot read property 'create' of undefined
    at MatSidenav.ngAfterContentInit Users/bdover/code/workshop/rethink-reading/node_modules/@angular/material/esm2015/sidenav.js:304:1)
    at callProviderLifecycles Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:10643:1)
    at callElementProvidersLifecycles Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:10617:1)
    at callLifecycleHooksChildrenFirst Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:10600:1)
    at checkAndUpdateView Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:11750:1)
    at callViewAction Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:12097:1)
    at execComponentViewsAction Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:12029:1)
    at checkAndUpdateView Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:11752:1)
    at callWithDebugContext Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:12941:28)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] Users/bdover/code/workshop/rethink-reading/node_modules/@angular/core/esm2015/core.js:12531:1)

[devversion]

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 Compiler: Native ES6 support for JIT and AOT angular#15127 and ES2015 target fails to serve angular-cli#7797)

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

[byrondover]

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!

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