fix: material not working with ES2015

[devversion]

Fixes that Angular Material cannot be used with ES2015. See #12760 for detailed information. We already had a workaround applied, but this improves the workaround because it only partially worked for classes where no attributes were defined.

Fixes #13695.

[mmalerba]

does this one need the ctorParameters forwarding?

[devversion]

It no longer needs the workaround because there is an explicit constructor for the MatExpansionPanel class now.

[epelc]

@devversion are you sure this works? I'm getting the same error with material and cdk 7.0.1

[devversion]

@epelc Pretty confident. I've confirmed it locally when submitting the PR. Also this fix isn't part of v7.0.1. Can you please check with master and let me know? Thanks!

[epelc]

@devversion Is there a way to install master easily with npm?

[devversion]

@epelc Yeah you could do npm i github:angular/{material2,cdk}-builds

[epelc]

@devversion Thanks I'll try it out. I think your fix didn't make it into 7.0.1 looking at the git history now

[devversion]

@epelc Awesome. Thanks! and yeah, exactly. The fix is not part of 7.0.1.

[epelc]

@devversion Yeah my bad I realized cmd+f some old similar fix in the change log once 7.0.1 came out.

I'm not sure if this is just me but I got a different error about ctor parameters when testing with master.

Looks like it's trying to call .map on an anonymous function?

NOTE this line works a bunch but at some point it gets passed an anonymous function which obvisouly doesn't have a map method since it's not an array(I just set a breakpoint for !ctorParameters.map to catch it).

I looked into it a bit and I think it might be something to do with maybe these anon functions not being called or something? I don't have it setup to test and I know little about this ctor/compilation bugs inner workings so might be easier you to checkout?

(MatTable as any)['ctorParameters'] = () => (CdkTable as any)['ctorParameters'];

[devversion]

Thanks for checking that out. I'm not sure what's different in your scenario, but I can see why this "could" fail. I will push some safety changes to a PR tomorrow. Thanks again.

[devversion]

Also while you're at it, where is the code you shared in the second screenshot located? Are those constants defined within a class?

[epelc]

It was if you click the core.js:1394 link from the error(see first pic). I believe it is coming from the new ctorParameters properties you added in this current pr. That line only errors out when it gets to the new ones which are anonymous functions instead of arrays. I believe you might need to change to something like ctorParameters = CdkTable['ctorParamters'] instead of having a function definition but I may be wrong.

Here is a larger screenshot that may help

Also my testing repo with exactly what I'm using(standard cli project + basic table + target=es2015) https://github.com/epelc/bad-material-table

Let me know if you need any other info to help or if I can do anything.

[devversion]

I see, these are the reflection capabilities from Angular core. This definitely helps. Thanks again.

Also regarding just assigning the ctorParameters without the function, we need a function with a different reference because otherwise Angular won't even read the ctorParameters from MatTable.

I will have a look tomorrow. Will keep you updated. At first glance, it just looks like the CdkTable metadata is somehow not accessable.

[sishbi]

Is there a timeline for when this fix will get into a release?
Or is there someway I can use this fix from the master branch in my project?

[DenysVuika]

Trying to upgrade an application to 7.0.2, and got hundreds of unit tests now failing with TypeError: ctorParameters.map is not a function

[devversion]

Thanks for the report. Should be fixed soon. See #13834. Technically only things that previously didn't work either, should throw such an error. Are you using ES2015?

Edit: Actually after thinking about it again. It can also happen now if you don't use one of the given components with ES2015 because Angular always tries to read the metadata. Previously it would have just errored if you bootstrap a given component within ES2015.

[DenysVuika]

@devversion we are blocked by two releases already. Just upgraded to 7.0.3 and this damn thing (sorry) keeps failing with ctorParameters.map is not a function

[sishbi]

If you downgrade the target version in the tsconfig.json to es5 it works, which is what I did...
But I would still like to have a proper fix!

[devversion]

@DenysVuika Sorry, but unfortunately applying workarounds led to other problems which aren't really solvable in a way that still keeps the workaround in an acceptable way.

Since the whole issue is actually an Angular bug that will be fixed with angular/angular@95743e3 (so upcoming Angular v7.1.0 release), I'm tending to delete the whole workaround.

cc. @jelbourn for thoughts.

[knoefel]

Still not working after upgrade to 7.1!

[devversion]

Yeah, there are still some issues with @angular/core. I've created angular/angular#27267 to track this.

[CreepyGnome]

What is the status of Angular Material working with ES2015? Issue angular/angular#27267 shows it was fixed by angular/angular#29232. That last one was closed fixed almost 2 months ago.

This has become a blocker as if you need to use a feature that requires es2015 (ie Map and iterate features of it) you cannot because enabling this breaks Angular Material.

[nhhockeyplayer]

I am unable to use mat-sidenav

ERROR TypeError: Cannot read property 'runOutsideAngular' of undefined
    at new MatDrawer (sidenav.js:203)

I switched my target
"target": "es2018",

I thought it was safe to bump target to es2018

Angular CLI: 7.3.9
Node: 8.12.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/flex-layout              7.0.0-beta.19
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.0

[nhhockeyplayer]

actually I upgraded to latest angular and typescript and everything works with es2018

adios es5 and babel

some good feedback

team is doing an awesome job... angular with ngrx on rxjs rules
KOA hasnt gotten the recognition it deserves too...

typescript is the real deal

Angular CLI: 7.3.9
Node: 8.12.0
OS: win32 x64
Angular: 8.0.0-rc.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cdk                      7.3.7
@angular/cli                      7.3.9
@angular/flex-layout              7.0.0-beta.19
@angular/http                     7.2.15
@angular/material                 7.3.7
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.29.0

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