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 uglify-es@3.2.0. I manually installed uglify-es@3.2.0 and everything works fine with the ES2015 TypeScript target now.