Angular: *ngSwitchCase doesn't work in Dartium

[enyo]

I have a very strange behaviour when checking for conditions, which I have now tried to pinpoint for the last few hours, but was unable to: the same condition does work once but not twice in the same component.

The issue started to appear when I upgraded to the latest dart version (1.24.2) and upgraded to the latests Ng2 version (v3.1.0 from -beta1). Rolling back to either of those didn't resolve the issues I'm seeing though, so I can't say for sure that it is related.

I have a very simple IconComponent:

import 'package:angular2/angular2.dart';

@Component(
  selector: 'el-icon',
  templateUrl: 'icon_component.html',
  styleUrls: const ['icon_component.css'],
)
class IconComponent {
  @Input()
  String icon;
}

{{icon}}

<div *ngIf="icon == 'small-facebook'">IF WORKING</div>

<div [ngSwitch]="icon">
  <div *ngSwitchCase="'small-facebook'">SWITCH WORKING</div>
</div>

When running, this displays:

small-facebook
IF WORKING

but the SWITCH WORKING is not displayed.

For debugging purposes here is the actual HTML code this outputs:

<el-icon class="_ngcontent-keg-22 _nghost-keg-3">small-facebook

<!--template bindings={}--><div class="_ngcontent-keg-3">IF WORKING</div>

<div class="_ngcontent-keg-3">
  <!--template bindings={}-->
</div>
</el-icon>

When I run the same thing in Chrome (so after dart2js) it works as expected.

---

Maybe this helps too:

The icon component is used like this:

<!-- Not working -->
<el-icon [icon]="'small-' + type"></el-icon>

inside another component. Changing this to:

<!-- Working -->
<el-icon [icon]="'small-facebook'"></el-icon>

works (although I am 100% certain that type actually is the String facebook).

[enyo]

I have isolated the issue to its core: https://gitlab.com/meno/angular2-issue

[matanlurey]

This is likely an issue with our code handling Strings for the Dart VM (it is different than JS).

Unfortunately it is unlikely we will get this fixed in a 3.x release. If you are OK working around (i.e. use *ngIf for now), we can fix it for 4.x.

[matanlurey]

This should have been fixed as of https://github.com/dart-lang/angular/commit/9d75c98baaf894d5ce47f120cfe1b64b909a8df9. Hmm.

[enyo]

The reason I didn't think that it was only ngSwitch related, is because I had a very similar problem, but with ngIfs. This IconComponent has many different possible icons, and for some reason, some icons didn't display properly anymore after I upgraded dart and angular. So I changed it to a switch statement in the hopes of fixing the issue (or finding it). Interestingly, a completely different set of icon values started failing so I reported it and created this minimal test case.

I will try to reproduce the same thing with ngIfs today.

[enyo]

So I tried isolating the case for two hours now, but was unable to. The behaviour I'm experiencing is extremely strange, and I'm going to describe it the best I can, even though it seems unrelated to the issue with *ngSwitch:

I have the exact same IconComponent but instead of ngSwitch, all of them are tested with *ngIf. In my project, I have reduced it do be a simple list of <div>s (there are exactly 26 of them) looking like this:

<div [class]="'icon-' + icon">
  <div *ngIf="icon == 'player-play'">MATCH</div>

  <div  *ngIf="icon == 'player-pause'">icon == 'player-pause'</div>

  <div  *ngIf="icon == 'player-spinner'">icon == 'player-spinner'</div>
  <div  *ngIf="icon == 'big-player-pause'">icon == 'big-player-pause'</div>
  [...]
</div>

Now the absurd part is: if I remove one of the divs that has the *ngIf on it, it starts working again, so apparently 25 ngIfs is the limit. And if I remove [class]="'icon-' + icon" as well, it starts working too.

As I said: I tried reproducing it in a clean environment but was unable to.

I have also noticed, that when the app starts up, the *ngIf works for a split second, and then disappears again (I have checked the HTML code, and it is definitely not a visual or CSS issue).

Let me know if you have an idea of what this could be and how I could reproduce it.

EDIT: I have now encapsulated the icon field in the IconComponent and added this check:

class IconComponent {
  String _icon;

  String get icon => _icon;

  @Input()
  set icon(String icon) {
    if (_icon != null) print('Icon Value Changed: Prev: $_icon Now: $icon');
    _icon = icon;
  }
}

because I wanted to see whether the icon changed and if that might be the reason for it disappearing after a split second, but it is never outputted, so the actual value of icon is not changed after initialisation.

[matanlurey]

Sorry I have not had a chance to investigate. Are you still having this issue @enyo?

[enyo]

Yes, I still am. It's not a big issue, since we are trying to switch to DDC in development and it works after dart2js but it is definitely an issue and I have spent two days trying to isolate the issue without success.

[matanlurey]

I'll try and take a look today.

[mcmahonjohn]

@matanlurey Just curious any updates?

[leonsenft]

@mcmahonjohn @enyo We have a fix for this landing in the next release.