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