[tab-bar] align property breaks mdc-tab-bar

[KaranKapoorIon]

Describe the bug Setting the align property on an mdc-tab-bar throws an exception which causes the control to not render.

To Reproduce Steps to reproduce the behavior:

<mdc-tab-bar fixed align="center">
      <mdc-tab-scroller>
          <mdc-tab label="Tab 1"></mdc-tab>
          <mdc-tab label="Tab 2"></mdc-tab>
      </mdc-tab-scroller>
</mdc-tab-bar>

tab-bar.js - Exception is thrown because this.tabScroller is undefined

set align(value) {
    this._align = value || 'start';
    this.tabScroller.align = this.align;
}

Expected behavior The tab bar should render with the tabs centered.

What Angular MDC version are you using? 5.1.1

What OS are you using?: Windows Server 2012

What browser(s) is this bug affecting?: Chrome

[KaranKapoorIon]

@trimox I downloaded your 'angular-mdc' example (stackblitz wasn't rendering mdc correctly), tried to replicate it locally, but failed. As I've mentioned in the description. this.tabScroller seems to be null when trying to set align. Would you happen to know what I'm doing wrong here?

Edit: Corrected spelling mistake.

[KaranKapoorIon]

@trimox Found the issue. It happens when enableIvy is set to true under tsconfig.json

[trimox]

@KaranKapoorIon Thanks for reporting this. If you could retry, but this time install the canary tag for upcoming v6.0.0 release.

yarn add @angular-mdc/web@canary
# or
npm i @angular-mdc/web@canary

[KaranKapoorIon]

@trimox Just tried it. The issue still persists.

[trimox]

@KaranKapoorIon Thank you for testing v6 canary with this. I'll try to duplicate.

[trimox]

Duplicated.