core.js:12853 无法绑定到“ngIf”，因为它不是“div”的已知属性

Question

I am using Angular 9.

and I am having a use case of loading dynamic components

In one of my component, I am getting the warning

core.js:12853 Can't bind to 'ngIf' since it isn't a known property of 'div'

I have included commonModule in my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { CommonModule } from '@angular/common';

// import { TokenInterceptor } from './auth/token.interceptor';

//Module-imports
import {ServeMonstaAuthenticationRoutingModule} from './serve-monsta-authentication/serve-monsta-authentication-routing.module'
import { ServeMonstaAuthenticationModule } from './serve-monsta-authentication/serve-monsta-authentication.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
//Services-imports
import { UserLoginService } from './serve-monsta-authentication/services/user-login/user-login.service';
import { UserSignupService } from './serve-monsta-authentication/services/user-signup/user-signup.service';
import { SurveyService } from '../services/survey/survey.service';

//Component-imports
import { CreateSurveyComponent } from './components/survey/create-survey/create-survey.component';
import { ViewSurveyComponent } from './components/survey/view-survey/view-survey.component';
import { CreateQuestionsComponent } from './components/questions/create-questions/create-questions.component';
import { PreviewQuestionsComponent } from './components/questions/preview-questions/preview-questions.component';
import { NavbarComponent } from './shared/navbar/navbar.component';
import { SideNavigationComponent } from './shared/side-navigation/side-navigation.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { RadioComponent } from './components/input-components/radio/radio.component';
import { CheckboxComponent } from './components/input-components/checkbox/checkbox.component';
import { DateComponent } from './components/input-components/date/date.component';
import { TextareaComponent } from './components/input-components/textarea/textarea.component';
import { RankingComponent } from './components/input-components/ranking/ranking.component';
import { RatingComponent } from './components/input-components/rating/rating.component';
import { BooleanComponent } from './components/input-components/boolean/boolean.component';
import { ChipDistributionComponent } from './components/input-components/chip-distribution/chip-distribution.component';
import { NumericalComponent } from './components/input-components/numerical/numerical.component';
import { GroupNumberComponent } from './components/input-components/group-number/group-number.component';
import { PlainBannerComponent } from './components/input-components/plain-banner/plain-banner.component';
import { FreeTextComponent } from './components/input-components/free-text/free-text.component';
import { DropdownComponent } from './components/input-components/dropdown/dropdown.component';
import { LongTextComponent } from './components/input-components/long-text/long-text.component';
import { ShortTextComponent } from './components/input-components/short-text/short-text.component';
import { DynamicFieldDirective } from './components/input-components/dynamic-field/dynamic-field.directive';
import { DynamicFormComponent } from './components/questions/dynamic-form/dynamic-form.component';


@NgModule({
  declarations: [
    AppComponent,
    CreateSurveyComponent,
    ViewSurveyComponent,
    CreateQuestionsComponent,
    PreviewQuestionsComponent,
    NavbarComponent,
    SideNavigationComponent,
    DashboardComponent,
    DynamicFieldDirective,
    DynamicFormComponent,
    ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    AppRoutingModule,
    ServeMonstaAuthenticationModule,
    ServeMonstaAuthenticationRoutingModule,
    BrowserAnimationsModule,
    RouterModule,
    BsDatepickerModule.forRoot(),
  ],

  entryComponents:[
    RadioComponent,
    CheckboxComponent,
    DateComponent,
    TextareaComponent,
    RankingComponent,
    RatingComponent,
    BooleanComponent,
    ChipDistributionComponent,
    NumericalComponent,
    GroupNumberComponent,
    PlainBannerComponent,
    FreeTextComponent,
    DropdownComponent,
    LongTextComponent,
    ShortTextComponent,
  ],
  providers: [
    // {
    //   provide: HTTP_INTERCEPTORS,
    //   useClass: TokenInterceptor,
    //   multi: true
    // },
    UserLoginService,
    UserSignupService,
    SurveyService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is my component where I am using ngIf

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { Field } from '../../../core/question/field';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-radio',
  template: `
    <div class="heightautos" >
      <label class="contatradio">
        <input type="radio" checked="checked" />
        <span class="checkmarkrd"></span>
      </label>
      <input
        type="text"
        name="yes"
        placeholder="Option 1"
        class="optionranking chkleft"
        [value]="field.optionText"
      />
      <div class="attached-closesd ">
        <img
          src="${'../../../../assets/img/icon-close.png'}"
          class=" btn btn-default attached-closebtn"
        />
      </div>
      <div class="attached-closesd ">
        <div class="upload-btn-wrapper">
          <button class="btn borderrt">
            <img src="${'../../../../assets/img/attached.png'}" class="pin" />
          </button>
          <input type="file" name="myfile" />
        </div>
      </div>
      <div class="attached-closesd ">
        <img src="${'../../../../assets/img/perfume.png'}" class="perfume-img" />
      </div>

      <!---other option---->
      <div *ngIf="field.otherOptionAvailable">
        <input 
          type="text"
          placeholder="Other Option {{field.optionId}}"
          class="optioncheck chkleft"
        />
      </div>
      <!---other option---->
    </div>
  `,
  styles: [],
})
export class RadioComponent implements OnInit {
  field: Field;
  group: FormGroup;

  constructor() {}

  ngOnInit(): void {
    console.log("Hey I am Radio :: ", this.field)
  }
}

and here is the object(response) I am getting in my above component

surveyQuestionResponseBeans: Array(5)
0:
isHavingMultimedia: true
isMandatory: true
isRandomized: true
languageCode: "en"
orderNumber: 1
pageNumber: 1
questionId: 1
questionStatus: "ACTIVE"
questionText: "What is your favourite game?"
questionType: "RADIO"
surveyOptionResponseBeans: (2) [{…}, {…}]
__proto__: Object
1:
isHavingMultimedia: true
isMandatory: true
isRandomized: true
languageCode: "en"
orderNumber: 1
pageNumber: 1
questionId: 2
questionStatus: "ACTIVE"
questionText: "What is your FAV Cuisine.?"
questionType: "CHECKBOX"
surveyOptionResponseBeans: (3) [{…}, {…}, {…}]
__proto__: Object

Any Suggestions I have already included CommonModule and also tried using an extra boolean variable.

Answer 1

If you are using a custom module then you need to import the Common Module there too. Doing so will hopefully resolve this issue.