Why am I getting *ngIf not a property of div error?

Question

I am using a version of Cory Rylan's technique to display validation error messages on my forms. This worked fine in RC4, however, I can't figure out what to do to make this work with RC5.

Here's my pared down SharedModule:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { ValidationService } from '../services/validation.service';
import {ValidationMessageComponent} from '../validation/validation.message.component;

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule ],
  declarations: [ ValidationMessageComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, ValidationMessageComponent ]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ ValidationService ]
    };
  }
}

The ValidationMessageComponent:

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../services/validation.service';

@Component({
  moduleId: module.id,
  selector: 'kg-validationMessage',
  template: `<div *ngIf="validationMessage !== null">{{validationMessage}}</div>`
}) 


export class ValidationMessageComponent {
  @Input() control: FormControl;
  constructor() { }

  get validationMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

The error happens in the template *ngIf. The html I'm trying to inject this into has a number of *ngIf's, all of which work fine. I've tried every combination to no avail. Any help sincerely appreciated.

Answer 1

You need to add CommonModule from @angular/common to your ValidationMessageModule imports because CommonModule provides common directives such as ngIf or ngFor. You can use ngIf in your root module because you have BrowserModule imported and BrowserModule re-exports CommonModule.