1

In one of my html file I get errors that

Can't bind to 'ngIf' since it isn't a known property of div

Can't bind to 'ngIf' since it isn't a known property of 'app-set-username'

Can't bind to 'ngIf' since it isn't a known property of 'app-login'

I do have imported commonModule in the html's module.ts. In my other html files everything works. Here is the not working html and module:

    <div class="user-page-wrapper">
      <app-set-username
          class="set-username"
          *ngIf="setUsernameIsActive"
      ></app-set-username>
      <app-login class="login-window" *ngIf="LoginWindowIsActive"></app-login>
      <div *ngFor="let q of progress">{{q.word}} {{q.familiarity}}</div>
    </div>


    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { UserPageRoutingModule } from './user.routing.module';
    import { MenuModule } from '../../core';
    import { LoginModule } from 'src/app/core/components/login/login.module';
    import { IonicModule } from '@ionic/angular';
    import { UserPage } from './user.page';
    import { SetUsernameModule } from 'src/app/core/components/set-username/set-username.module';
    import { BrowserModule } from '@angular/platform-browser';
    
    @NgModule({
      imports: [
        CommonModule,
        IonicModule,
        UserPageRoutingModule,
        MenuModule,
        LoginModule,
        IonicModule,
        SetUsernameModule,
        BrowserModule,
      ],
      declarations: [UserPage],
    })
    export class UserPageModule {}

and the working html and module:

    <div class="home-page-wrapper">
      <app-menu-profile *ngIf="!isAuthenticated"></app-menu-profile>
      
      <router-outlet></router-outlet>
    </div>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { MenuModule } from 'src/app/core';
import { ProfileOverviewModule } from 'src/app/core';
import { LoginModule } from 'src/app/core/components/login/login.module';
import { MenuProfileModule } from 'src/app/core/components/menu-profile/menu-profile.module';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    HomePageRoutingModule,
    MenuModule,
    ProfileOverviewModule,
    LoginModule,
    MenuProfileModule,
  ],
  declarations: [HomePage],
})
export class HomePageModule {}

Also something strange is that building prod solves this error, but in dev it doesn't work, and this part of my code was working without any errors and I made no changes only in the app-login, but reverting the changes didn't solve it. Edit: If I remove the *ngIf and leave the it runs so it is imported correctly and in the login.module.ts CommonModule is also imported so it can't be that.

PingWinLqD
  • 77
  • 6

1 Answers1

0

My bad I found what I did wrong. I don't know if this should break the code, but I accidentally imported the UserPageModule into my logincomponent.ts and that's what caused the error. (Even that I didn't use it anywhere else in the component only importing it break it)

PingWinLqD
  • 77
  • 6