Ionic: Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’

Issue

I know this is a very common issue that has been asked a million of times but after checking lots of forums, I still can’t make it work… The solution that is always provided is to add the “CommonModule” and “BrowserModule” but I got those in my files and nothing changes. The weird thing is that my other file that uses *ngIf aswell works..

Here is my code :

statistics.page.html

    <ion-content [fullscreen]"true">

      <div class"main_block">
        <p class"title">Global Statistics</p>
        <div *ngIf"testsInitialized  false" class"figures_block">
          <div class"figures_subblock">
            <p class"text">You took</p>
            <p class"figure">{{testsAmount}}</p>
            <p class"text">tests in total</p>
          </div>
        </div>

        <div *ngIf"testsInitialized" class"figures_block">
          <div class"figures_subblock">
            <p class"text">You took</p>
            <p class"figure">{{testsAmount}}</p>
            <p class"text">tests in total</p>
          </div>
          <div class"figures_subblock">
            <p class"text">Average score of</p>
            <p class"figure">{{testsAverage}}/5</p>
            <p class"text">for all the tests</p>
          </div>
        </div>
          <p class"title">Wall of shame</p>
          <div class"charac_block_container" *ngIf"shameIsOn">
            <div class"pepepoint_div_left">
              <img src"../../assets/img/pepePoint.png">
            </div>
            <div class"charac_block">
              <div class"block_row" *ngIf"phoneticHiraganaMistakesTable">
                <div class"charac_subblock">
                  <p class"text">Hiragana phonetic</p>
                  <p class"charac">{{phoneticHiraganaMistakesTable}}</p>
                </div>
                <div class"counter">
                  <p class"figure">x{{phoneticHiraganaMistakesAmount}}</p>
                </div>
              </div>
              <div class"block_row" *ngIf"wordHiraganaMistakesTable">
                <div class"charac_subblock">
                  <p class"text">Hiragana word</p>
                  <p class"charac">{{wordHiraganaMistakesTable}}</p>
                </div>
                <div class"counter">
                  <p class"figure">x{{wordHiraganaMistakesAmount}}</p>
                </div>
              </div>
              <div class"block_row" *ngIf"phoneticKatakanaMistakesTable">
                <div class"charac_subblock">
                  <p class"text">Hiragana phonetic</p>
                  <p class"charac">{{phoneticKatakanaMistakesTable}}</p>
                </div>
                <div class"counter">
                  <p class"figure">x{{phoneticKatakanaMistakesAmount}}</p>
                </div>
              </div>
              <div class"block_row" *ngIf"wordKatakanaMistakesTable">
                <div class"charac_subblock">
                  <p class"text">Hiragana word</p>
                  <p class"charac">{{wordKatakanaMistakesTable}}</p>
                </div>
                <div class"counter">
                  <p class"figure">x{{wordKatakanaMistakesAmount}}</p>
                </div>
            </div>
          </div>
          <div class"pepepoint_div_right">
            <img src"../../assets/img/pepePoint.png">
          </div>
        </div>

        <div class"charac_block_container" *ngIf"!shameIsOn">
          <div class"charac_block">
            <div class"block_row">
              <div class"charac_subblock">
                <p class"charac">No shame yet...</p>
              </div>

            </div>
          </div>
        </div>

        <ion-button (click)"clearStatsAlertConfirm()">Clear All</ion-button>

      </div>

      Coming soon...





    </ion-content>

statistics.page.ts

    import { StatsService } from './../service/stats.service';
    import { AlertController, ModalController } from '@ionic/angular';
    import { SettingsPage } from '../settings/settings.page';
    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-statistics',
      templateUrl: './statistics.page.html',
      styleUrls: ['./statistics.page.scss'],
    })
    export class StatisticsPage implements OnInit {

      testsAmount: any  0;
      testsAverage: any "-";
      testsInitialized: boolean  false;
      phoneticHiraganaMistakesTable: string;
      wordHiraganaMistakesTable: string;
      phoneticKatakanaMistakesTable: string;
      wordKatakanaMistakesTable: string;
      phoneticHiraganaMistakesAmount: number;
      wordHiraganaMistakesAmount: number;
      phoneticKatakanaMistakesAmount: number;
      wordKatakanaMistakesAmount: number;
      isPhoneticHiraganaMistakesTable: boolean;
      isWordHiraganaMistakesTable: boolean;
      isPhoneticKatakanaMistakesTable: boolean;
      isWordKatakanaMistakesTable: boolean;
      shameIsOn: boolean;

      constructor(public statsService: StatsService, public alertController: AlertController, private modalController: ModalController) {}

      removeAll(){
        this.statsService.clearAll();
      }

      async ngOnInit() {
    // some code here
        }

}

statistics.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';

    import { IonicModule } from '@ionic/angular';

    import { StatisticsPageRoutingModule } from './statistics-routing.module';

    import { StatisticsPage } from './statistics.page';

    @NgModule({
      imports: [
        CommonModule,
        BrowserModule,
        FormsModule,
        IonicModule,
        StatisticsPageRoutingModule
      ],
      declarations: [StatisticsPage]
    })
    export class StatisticsPageModule {}

app.module.ts

    import { StatsService } from './service/stats.service';
    import { NativeAudio } from '@ionic-native/native-audio/ngx';
    import { Injectable, NgModule} from '@angular/core';
    import { BrowserModule} from '@angular/platform-browser';
    import { CommonModule } from '@angular/common';
    import { RouteReuseStrategy } from '@angular/router';

    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';

    import { HttpClientModule } from '@angular/common/http';

    import { SuperTabsModule } from '@ionic-super-tabs/angular';
    import { IonicStorageModule } from '@ionic/storage-angular';
    import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
    import { Drivers } from '@ionic/storage';

    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule,
        CommonModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        HttpClientModule,
        SuperTabsModule.forRoot(),
        IonicStorageModule.forRoot({
          name: 'statsDB',
          driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB]
        }),],
      providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        {provide: NativeAudio, useClass: NativeAudio},
        StatsService,
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

I tried restarting the IDE aswell with no luck

Solution

I just found the answer and this is either very dumb or my understanding of Angular is lacking.. So it appeared that I didn’t have the route of the statistics configured in the app-routing.module.ts which wasn’t a problem as I used the super-tab module to display my page. When I added the route for the statistics page, it suddenly fixed the *ngIf error. My guess is that it needs to preload the page to link some modules ? (There is the import of the “PreloadAllModules” in the route module)

Answered By – LittleOne

Leave a Comment