1

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

4
  • Show the exact error message output by the tools
    – Aviad P.
    Aug 7, 2021 at 12:34
  • core.js:10101 NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div'.
    – LittleOne
    Aug 7, 2021 at 12:54
  • StatisticsPageModule is missing from your app module. Please import StatisticsPageModule in your app module. Aug 7, 2021 at 14:19
  • It seems like it fixed the issue but I don't understand why I need to import the module of a specific page when all other pages work well without that
    – LittleOne
    Aug 7, 2021 at 14:47

2 Answers 2

2

As @Mir entafaz Ali already answered as comment, you have to import the module, to be able to use the component. For what I can see in your code, you're using a routing module. Meaning that you're lazy loading the pages. What you should do.

In the app-routing.module.ts you should be loading the tabs. like follow

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then((m) => m.TabsPageModule),
  },
]

And then, in your tabs-routing.module.ts you should be importing the StatisticsPageModule like this.

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'statistics',
        loadChildren: () => import('route/to/statistics.module').then((m) => m.StatisticsPageModule)
      },
    ]
  }
]

Do note, StatisticsPageModule should be imported only once, and it should be imported in the tabs-routing.module.ts. Remove it from everywhere else.

Also, your StatisticsPageModule the BrowserModule which should be imported only once in your application, and in the app.module.ts. So please do remove this one from the StatisticsPageModule this should fix the error.

This should also give an answer this question

I don't understand why I need to import the module of a specific page when all other pages work well without that

7
  • I added the BrowserModule in the StatisticsPageModule when I was still trying to fix the issue by myself. I just tried removing it while removing the import of the StatisticsPageModule in the app.module.ts. Unfortunately it brings back the *ngIf error. Considering I have another page that uses *ngIf aswell and has a similar configuration that doesn't give me an error, i'm really confused. Maybe that's a bug ? Because i'm pretty sure it started giving me the error after I updated some packages.
    – LittleOne
    Aug 8, 2021 at 11:43
  • @LittleOne Remove BrowserModule every where but let it in the app.module.ts. Import the StatisticsPageModule in your app.module.ts. I'm pretty sure angular does not have a bug on this one, because you wouldn't be the first one to see this. What is the angular version you use? Aug 9, 2021 at 8:26
  • I did try this solution and it was working fine but I posted another solution (last post) yesterday explaining how I solved it. It was not an Angular bug indeed..
    – LittleOne
    Aug 9, 2021 at 9:33
  • @LittleOne I did update my answer to give you more information about your error. Does it help? Aug 9, 2021 at 10:47
  • Thx for the precisions, I understand that I shouldn't duplicate those modules. Regarding the routing configuration, super-tabs work differently than normal ion tabs, you don't need to nest routes because you already nest the different routes in the html when adding each page in the <super-tab> markers. Your routing solution might work but setting up everything in the app-routing.module.ts works perfectly fine aswell :)
    – LittleOne
    Aug 9, 2021 at 14:15
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.