importing a component in multiple module in Angular 4

Question

I have a SharedModule

import { NgModule } from '@angular/core';
import { ControlMessagesComponent } from './control-messages.component';

@NgModule({
  imports: [
  ],
  declarations: [
    ControlMessagesComponent
  ],
  exports: [
    ControlMessagesComponent,
  ]
})

export class SharedModule {}

Then I imported in 2 different Modules:

import { SharedModule } from './../shared/shared.module';

@NgModule({
  imports: [
      SharedModule
  ],
  declarations: [
  ],
  providers: [
  ]
})

export class OnboardModule {}

import { SharedModule } from '../shared/shared.module';
@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [

  ],
  providers: [

  ]
})

export class AModule {}

Here is the ControlMessagesComponent

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ValidationService } from './../validators/validator';

@Component({
  selector: 'control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {
  @Input() control: FormControl;
  constructor() {}

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

When I use it: <control-messages [control]="form.controls.assetName"></control-messages>

I get the following error:

Can't bind to 'ngIf' since it isn't a known property of 'div'. ("]*ngIf="errorMessage !== null">{{errorMessage}}"): ng:///SharedModule/ControlMessagesComponent.html@0:5 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[ERROR ->]{{errorMessage}}"): ng:///SharedModule/ControlMessagesComponent.html@0:0

I am out of options can someone please let me know what I am doing wrong here?

Answer 1

Add CommonModule to your SharedModule. NgIf and NgForOf are also directives which are in the CommonModule. Your Component which is actually in SharedModule, uses NgIf, so you must import it in your module.

Description

The module that includes all the basic Angular directives like NgIf, NgForOf,

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ControlMessagesComponent } from './control-messages.component';

@NgModule({
  imports: [
     CommonModule
  ],
  declarations: [
    ControlMessagesComponent
  ],
  exports: [
    ControlMessagesComponent,
  ]
})

export class SharedModule {}