Material: contact-chips: Remove icon button is not rendered in IE11

[molehillrocker]

Bug, enhancement request, or proposal:

Bug (I guess). Since I upgraded my app from AngularJS Material v1.1.8 to v1.1.11 (and newer), IE11 does not render the remove button for mdContactChips anymore:

It is still possible to click and remove the chip, only the icon is missing. In other Browsers, everything is working as expected, besides the fact that all of them print an error in the console when I use mdContactChips.
The error is:

angular.js:15567 TypeError: Cannot read property '$watchCollection' of undefined
    at angular-material.min.js:7
    at angular.js:21593
    at Tg.completeTask (angular.js:21231)
    at angular.js:6812

angular.js:15567 TypeError: Cannot read property '$watchCollection' of undefined
    at angular-material.min.js:7
    at angular.js:21593
    at Tg.completeTask (angular.js:21231)
    at angular.js:6812 "Possibly unhandled rejection: {}"

This error occurs since https://github.com/angular/material/pull/11422/commits/7c913decfb38957dcaf05e946cc7365370a4cc3a has been merged, before I had no problems and the remove buttons were rendered correctly.

I removed the Aria stuff for testing purposes from the MdContactChipsCtrl.prototype.init function and now everything works again.

What is the expected behavior?

IE 11 renders the remove button icon for mdContactChips correctly and no error is shown in the console.

What is the current behavior?

IE 11 does not always render the remove button icon for mdContactChips and the console shows an error.

What is the use-case or motivation for changing an existing behavior?

Let mdContactChips render the remove button icon again in IE11.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: v1.7.8
• AngularJS Material: v1.1.11+
• OS: Windows 7/10
• Browsers: IE11, Chrome and Firefox

Is there anything else we should know? Stack Traces, Screenshots, etc.

I'm currently using the mdContactChips as follows:

<md-contact-chips ng-model="vm.selectedEditors"
  md-contacts="vm.getEditors($query) | orderBy: 'displayName'"
  md-contact-name="displayName"
  md-contact-email="emailAddress"
  md-require-match="true"
  md-highlight-flags="i"
  filter-selected="true"
  placeholder="Weiterleiten an"
  secondary-placeholder="Weiterleiten an">
</md-contact-chips>

Method getEditors() executes a request against the server and returns an array of editors, each consisting of a displayName and an emailAddress. Whenever an mdContactChip is rendered in IE11, the remove button icon is missing.

[Splaktar]

Is this reproducible in the docs or do you have a CodePen demo?

[molehillrocker]

I'll try to create a demo by the middle of next week when I'm at my customers place.

[molehillrocker]

Here is a demo: https://codepen.io/anon/pen/ROKKJJ?editors=1011

I found out that the cause is the following line in the application configuration:

$compileProvider.debugInfoEnabled(false);

As soon as I enable debug information, the error is gone and everything works as expected. Now I'm not sure if this is a bug, intended behavior or something else. Maybe you can enlighten me?

[Splaktar]

Ah yeah, it looks like https://github.com/angular/material/blob/7c913decfb38957dcaf05e946cc7365370a4cc3a/src/components/chips/js/contactChipsController.js#L43 is depending upon debug info being enabled. More details in the AngularJS docs.

We should fix this to not rely on debug info being enabled. Thank you for reporting this and helping with the investigation!

[anatolyg]

Any idea when the next release of material might be? I'm hitting this as well. Thanks!

[Splaktar]

Opened PR https://github.com/angular/material/pull/11871 to fix this.