Angular2 (2.0.0-beta.17) NgSwitchWhen gives "No provider for TemplateRef!"

Question

I've been stumped by this for a fair few hours now. It's time for one of you guys to tell me what I'm doing wrong :)

The below component fails with 'No provider for TemplateRef!'. A plunker is available here. I got the ngSwitch syntax from here.

import {Component} from '@angular/core'
//This should make the NgSwitch family available, right?
import {CORE_DIRECTIVES} from '@angular/common'
// I get same result with explicit import
// import {NgSwitch,NgSwitchWhen} from '@angular/common' 

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [ngSwitch]="switchValue">
        <div ngSwitchWhen="42">It's 42!</div>
        <div ngSwitchWhen="21">It's 21!</div>
      </div>
    </div>
  `,
  directives: [CORE_DIRECTIVES]
  // directives: [NgSwitch,NgSwitchWhen]
})
export class App {
  switchValue = 42;
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

Answer 1

If you use the short syntax with implicit <template> you need to add *

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div [ngSwitch]="switchValue">
        <div *ngSwitchCase="42">It's 42!</div>
        <div *ngSwitchCase="21">It's 21!</div>
        <!-- before RC.2 
          <div *ngSwitchWhen="42">It's 42!</div>
          <div *ngSwitchWhen="21">It's 21!</div>
        -->
      </div>
    </div>
  `,
})
export class App {
  switchValue = 42;
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }
}

See also NgSwitch directive