l'importation d'un composant dans le module multiple angulaire 4

Question

J'ai un SharedModule

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

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

export class SharedModule {} 

J'importé en 2 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 {} 

Voici le 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; 
    } 
} 

Lorsque Je l'utilise: <control-messages [control]="form.controls.assetName"></control-messages>

je reçois l'erreur suivante:

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

Je suis d'options quelqu'un peut-il s'il vous plaît me faire savoir ce que je fais mal ici?

Answer 1

Ajoutez CommonModule à SharedModule. NgIf et NgForOf sont également des directives qui sont dans le CommonModule. Votre composant qui est actuellement en SharedModule utilise NgIf, vous devez donc l'importer dans votre 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 {}