Add support for ng-template since template is depreciated

[naveedahmed1]

Since the latest release of Angular 2 4.0.0-rc.1 has introduced and deprecated and template attribute, please update the Material component accordingly.

Currently when compiling with latest version it returns below warnings:

The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><div class="mat-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getClassList()" #p"): MdAutocomplete@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("<cdk-focus-trap>[ERROR ->]<template cdkPortalHost></template></cdk-focus-trap>"): MdDialogContainer@0:16
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><div class="mat-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"): MdMenu@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("span> </span><span class="mat-select-arrow"></span> <span class="mat-select-underline"></span></div>[ERROR ->]<template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="clo"): MdSelect@0:511
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template cdkPortalHost></template>"): MdSnackBarContainer@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[ERROR ->]<template><ng-content></ng-content></template>"): MdTab@0:0
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("]="selectedIndex == i" [disabled]="tab.disabled" (click)="tabHeader.focusIndex = selectedIndex = i">[ERROR ->]<template [ngIf]="tab.templateLabel"><template [cdkPortalHost]="tab.templateLabel"></template></templ"): MdTabGroup@0:531
The <template> element is deprecated. Use <ng-template> instead ("b.disabled" (click)="tabHeader.focusIndex = selectedIndex = i"><template [ngIf]="tab.templateLabel">[ERROR ->]<template [cdkPortalHost]="tab.templateLabel"></template></template><template [ngIf]="!tab.templateLa"): MdTabGroup@0:568
The <template> element is deprecated. Use <ng-template> instead ("late [ngIf]="tab.templateLabel"><template [cdkPortalHost]="tab.templateLabel"></template></template>[ERROR ->]<template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</template></div></md-tab-header><div class="m"): MdTabGroup@0:636
Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("eTab.start)="_onTranslateTabStarted($event)" (@translateTab.done)="_onTranslateTabComplete($event)">[ERROR ->]<template cdkPortalHost></template></div>"): MdTabBody@0:205

Although the application compiles despite of the warning but the Tabs component which uses template doesn't render properly. When we click 2nd or 3rd tab, the contents of these tabs overlaps the contents of first tab.

[crisbeto]

I don't see a nice way of handling this both for Angular 2.4 and 4.0. That being said, those warnings will be gone when you run your app in production mode.

[naveedahmed1]

@crisbeto thank you for your reply, I was thinking the same that it would be difficult to handle it in a single release.

I do see these warning even for production ng build --prod --aot, the issue is that the tabs component doesn't work properly when compiled with these warnings.

[crisbeto]

Based on the commit that introduced it, it shouldn't get logged in dev mode. I'm not sure what the CLI's prod mode does exactly, but I'm guessing that the warnings should go away if you run enableProdMode.

[naveedahmed1]

@crisbeto the issue is that it breaks the tabs component even in production and enableProdMode enabled.

Can you please share how does the material team plan to add support for Angular 4?

Some of the new stuff in Angular 4 is really exciting such as View Engine updates which in my case actually reduces the bundle size of half (10mb to ~5mb).

[alexzuza]

To add support for animation see this answer http://stackoverflow.com/questions/42470364/using-angular-material-2-tabs-component-with-angular-4-0-0-rc-1/42471212#42471212

Working example material tabs with angular4.0.0-rc.1
https://plnkr.co/edit/MSfMM3zZTCqxv3cuPg00?p=preview

[naveedahmed1]

@alexzuza thank you, but with angular cli when running ng build --prod --aot I am receiving below error:

ERROR in vendor.e60455e679cd619355b7.bundle.js from UglifyJs SyntaxError: Unexpected token: name (AnimationEngine) [vendor.e60455e679cd619355b7.bundle.js:28085,6]

Please have a look at the discussion in comments of that answer.

[jmcgoldrick]

@naveedahmed1 see angular/angular#14737 regarding that specific error - note the solution offered there doesn't work for me currently.

@crisbeto, given the project is still in beta, I don't see the problem with asking consumers to run npm install --save @angular/...@next in the next milestone and updating to ng-template, @angular/animations etc

[naveedahmed1]

As a note; the Material2 components using template were broken in Angular 4.0.0-rc.1, though the
template parse warnings says " element is deprecated", but it seems that it wasn't the real cause why these components weren't working.

I added BrowserAnimationsModule to my main NgModule (AppModule in my case) imports and updated to Angular 4.0.0-rc.2 after which Material2 tabs are working properly.

Though it works but support for still needs to be added since element is deprecated and its support will eventually be removed.

As mentioned here https://github.com/angular/angular/blob/master/CHANGELOG.md#animation-package

If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule.

This means that after Material team officially support Angular 4, we wont be required to add BrowserAnimationsModule to imports of our main NgModule. @kara @crisbeto please correct me if I am wrong.