angular material and ngupgrade

[david-gang]

As angular material is the leading ui library created by google, and angular2, the next generation of angular is now in beta it is important to be able to work with both of them.

There is the excellent ngupgrade library.
I tried to upgrade the angular material components with the function: adapter.upgradeNg1Component()

These are the results.

The following fail:

• mdAutocomplete - Uncaught Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 11-11 [] in expression [inputId || 'fl-input-' + $mdAutocompleteCtrl.id].
• mdButton - Uncaught Error: Upgraded directive 'mdButton' does not support 'replace'.
• mdCard - Uncaught Error: Directive 'mdCard' is not a component, it is missing template.
• mdChip - Uncaught Error: Directive 'mdChip' is not a component, it is missing template.
• mdChipRemove - Uncaught Error: Directive 'mdChipRemove' is not a component, it is missing template.
• mdContent - Uncaught Error: Directive 'mdContent' is not a component, it is missing template.
• mdDialog - Uncaught Error: Directive 'mdDialog' is not a component, it is missing template.
• mdDivider - Uncaught Error: Directive 'mdDivider' is not a component, it is missing template.
• mdFabActions - Uncaught Error: Directive 'mdFabActions' is not a component, it is missing template.
• mdFabSpeedDial - Uncaught Error: Directive 'mdFabSpeedDial' is not a component, it is missing template.
• mdFabTrigger - Uncaught Error: Directive 'mdFabTrigger' is not a component, it is missing template.
• mdGridList - Uncaught Error: Directive 'mdGridList' is not a component, it is missing template.
• mdHighlightText - Uncaught Error: Upgraded directive 'mdHighlightText' does not support 'terminal'.
• mdIcon - Uncaught Error: Directive 'mdIcon' is not a component, it is missing template.
• mdInkRipple - Uncaught Error: Directive 'mdInkRipple' is not a component, it is missing template.
• mdInputContainer - Uncaught Error: Directive 'mdInputContainer' is not a component, it is missing template.
• mdList - Uncaught Error: Directive 'mdList' is not a component, it is missing template.
• mdListItem - Uncaught Error: Directive 'mdListItem' is not a component, it is missing template.
• mdMenu - Uncaught Error: Directive 'mdMenu' is not a component, it is missing template.
• mdMenuBar - Uncaught Error: Directive 'mdMenuBar' is not a component, it is missing template.
• mdRadioGroup - Uncaught Error: Directive 'mdRadioGroup' is not a component, it is missing template.
• mdSelect - Uncaught Error: Directive 'mdSelect' is not a component, it is missing template.
• mdSidenav - Uncaught Error: Directive 'mdSidenav' is not a component, it is missing template.
• mdSidenavFocus - Uncaught Error: Directive 'mdSidenavFocus' is not a component, it is missing template.
• mdSubheader - Uncaught Error: Upgraded directive 'mdSubheader' does not support 'replace'.
• mdSwipeDown - Uncaught Error: Directive 'mdSwipeDown' is not a component, it is missing template.
• mdSwipeLeft - Uncaught Error: Directive 'mdSwipeLeft' is not a component, it is missing template.
• mdSwipeRight - Uncaught Error: Directive 'mdSwipeRight' is not a component, it is missing template.
• mdSwipeUp - Uncaught Error: Directive 'mdSwipeUp' is not a component, it is missing template.
• mdTab - Uncaught Error: Upgraded directive 'mdTab' does not support 'terminal'.
• mdTabs - Uncaught Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 26-26 [] in expression [$mdTabsCtrl.maxTabWidth + 'px'].
• mdVirtualRepeat - Uncaught Error: Upgraded directive 'mdVirtualRepeat' does not support 'terminal'.
• mdVirtualRepeatContainer

The following work:

• mdCheckbox
• mdChips
• mdContactChips
• mdDatepicker
• mdFabToolbar
• mdGridTile
• mdProgressCircular
• mdProgressLinear
• mdRadioButton
• mdSlider
• mdSwitch
• mdToolbar
• mdTooltip
• mdVirtualRepeatContainer

When trying to upgrade the providers with adapter.upgradeNg1Provider():

All work (at least just upgrading)

*$mdBottomSheet

• $mdDateLocaleProvider
• $mdDialog
• $mdIcon
• $mdIconProvider
• $mdInkRipple
• $mdMedia
• $mdSidenav
• $mdSticky
• $mdToast

I see a possible ways to fix this:

• Changing ngupgrade. This is not possible as they are very strong against supporting these types of directives Upgrade module fires error when upgrading ng1 directives without templates. angular#4891 and they have there reasons
• Changing angular material directives: This could be a possibility but there is a reason why these directives were created this way and they were created by smart people, so just to change it because of ngupgrade is odd
• Creating a wrapper library where the directives are wrapped into other directives. I think most directives except the attribute directives could just be wrapped in other directives, especially with angular 1,5 which supports multiple transclusions

(This is a rough idea not code that runs)

class MaterialUpgrade {
constructor(private adapter: UpgradeAdapter) {
}
getMdIcon {
    angular.module('material-upgrade').directive('mdIcon2',() => {
template:'<md-icon><md-icon> // parameters binding ...

})

return adapter.upgradeNg1Component('mdIcon2)
}

This has the downside that the name of the directives are different than the original ones, and attribute directives are not covered.

So I don't see any 100% solution.

Getting an angular material 2 wouldbe a good solution when it comes out together with angular2 :-)

I am sure you will find a smart solution here 👍

[kamilmac]

First of all - Great work on the material library.
... and now back on topic :)

Ability to ng-upgrade current material library would be great ...but i also think that main focus on bringing material to angular2 would result in much better performance and overall simpler conversion process.

[RainingNight]

+1

[chillikid]

+1

[CaptainCodeman]

Not sure if this helps, but could $provide.decorator be used to wrap the directives so the names stay the same? I've used it to wrap existing directives before in Angular1

Just starting to experiment with both Angular2 and Material so maybe way off ...

[losorio35]

+1

[dsebastien]

+1

[george3447]

+1

[a8775]

+1

[Koslun]

So the main issue is that ngUpgrade does not actually upgrade directives that don't have an isolate scope. It seems that this might be a problem for many other directives out there. Like angular-file-upload. I would first ask if there really is not straight-forward way to wrap these kinds of directives or if all of them can be rewritten to use isolate scope. If the latter is the case then I'm thinking this is what the Angular Material team might already be doing for v2.

Regardless, if this issue isn't fixed somehow, I think Angular Material itself can become one of the biggest reasons for me and all the others who actively use this library to stay away from upgrading to Angular 2. As most Angular directives are just wrappers for other bigger JS libraries or at least some similar JS library available, this library might be one of the hardest to just replace imo.

Hopefully someone from the core Angular Material team or someone else can chime in on what to expect or how we could solve this issue ourselves.

At least nice to see that @jelbourn added a high priority tag to this issue.

[ansgar-john]

+1

[BhaskaranR]

+1

[femski]

+1

Not having Material support is the single biggest reason I can not use angular 2.

[losorio35]

This is an implementation of Material Design components for Angular 2
https://github.com/justindujardin/ng2-material

[friksa]

+1

[bartlomiejborzucki]

+1

[jardilio]

I whipped up this quick POC to see exactly what does and does not work: http://plnkr.co/edit/Wx897WH38ZVHRufrt5go?p=preview

As of writing this, it generates 208 specs from all found directives, services and factories of which 172 are failing to upgrade. This could very well need some tweaking, I was just trying to get a quick high-level picture of the current state.

[jelbourn]

cc @mhevery

[ThomasBurleson]

To be investigated/researched AFTER Layouts Gen2.

[chenzomi12]

+1

[shprink]

+1

[bh86]

+1

[moohkooh]

+1

[joerideg]

Well I actually just browsed through the source code of the directives. That and looking at the plunker @jardilio made it seems to me that so many directives use either compile, have no template, or use replace that the effort that goes into making these directives/services compatible with the ngUpgrade library would be better spend on getting the Angular2 version of ngMaterial done.

[david-gang]

Hi @ThomasBurleson,
Is there something i can contribute here?

Thanks,
David

[poznyakovskiy]

+1. Some directives, e.g. md-card, work without upgrading, though.

[david-gang]

Hi @ThomasBurleson ,

I guess that this issue can be closed . Is this correct?

Thanks,
David

[pablorsk]

Sorry, but someone can use ngMaterial (1) with Angular2? A small Recipe wil be great :P :)

[Splaktar]

@pablorsk no, it's not possible at this time. material2 for Angular 2+ is your best option, but it only recently entered beta so it may not be a good choice for all production apps.

[pablorsk]

Then, to make it clear, it is not possible to use ngMaterial + ngupgrade in angular2

Thanks @Splaktar!

[joerideg]

No its not. :)

…

On Fri, Dec 30, 2016, 13:43 Pablo Reyes ***@***.***> wrote: Then, to make it clear, it is not possible to use ngMaterial + ngupgrade in angular2 Thanks @Splaktar <https://github.com/Splaktar>! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6336 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AKfRT6S8enQbsyQ9VkHqAk3WNVh8pJl6ks5rNPxkgaJpZM4G2UWt> .

[AlexFreem]

Most part of ngMaterial ( 1 ) directives in their DDO uses link.
Link is a part of compile which cannot be used when upgrading to ng2 components.
https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-component-directives

[FinalDes]

Any updates?