无法绑定到“ngIf”，因为它不是“div”的已知属性 - 离子/角度错误

Question

I've been getting this error for the last few days now. I have read through other threads with the same error and tried what they suggested such as adding the CommonModule to both the current page and the app.module. I have also tried resetting the server using ng serve. Does anyone know why else i might have this issue? I have used more or less the same code in another part of the app and it works fine.

edit-page.module.ts:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    
    import { IonicModule } from '@ionic/angular';
    
    import { EditPagePageRoutingModule } from './edit-page-routing.module';
import { BrowserModule } from '@angular/platform-browser';

    
    import { EditPagePage } from './edit-page.page';
    import { SharedModule } from 'src/app/shared/shared.module';
    import { AppComponent } from 'src/app/app.component';
    
    @NgModule({
      imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        IonicModule,
BrowserModule
        EditPagePageRoutingModule
      ],
      declarations: [EditPagePage]
    })
    export class EditPagePageModule {}

edit-page.page.ts:

@Component({
  selector: 'app-edit-page',
  templateUrl: './edit-page.page.html',
  styleUrls: ['./edit-page.page.scss'],
})
export class EditPagePage implements OnInit, OnDestroy {
  artist: Artist;
  artistId: string;
  arForm: FormGroup;
  isLoading = false;
  steps: any = 1;

  private artistSub: Subscription;

  constructor(
    private route: ActivatedRoute,
    private artistService: ArtistService,
    private navCtrl: NavController,
    private router: Router,
    private loadingCtrl: LoadingController,
    private alertCtrl: AlertController
  ) {}

  get genreControls() {
    return (<FormArray>this.arForm.get('genre')).controls;
  }

  get equipmentControls() {
    return (<FormArray>this.arForm.get('equipment')).controls;
  }

  ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('artistId')) {
        this.navCtrl.navigateBack('/tabs/tab4');
        return;
      }
      this.artistId = paramMap.get('artistId');
      this.isLoading = true;
      this.artistSub = this.artistService
        .getArtist(paramMap.get('artistId'))
        .subscribe(
          artist => {
            this.artist = artist;
            this.arForm = new FormGroup({
              name: new FormControl(this.artist.name, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              type: new FormControl(this.artist.type, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              cost: new FormControl(this.artist.cost, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              equipment: new FormArray([]
                ),
              band: new FormControl(this.artist.band, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              availableFrom: new FormControl(this.artist.availableFrom, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              availableTo: new FormControl(this.artist.availableTo, {
                updateOn: 'blur',
                validators: [Validators.required]
              }),
              descrpition: new FormControl(this.artist.descrpition, {
                updateOn: 'blur',
                validators: [Validators.required, Validators.maxLength(180)]
              }),
              genre: new FormArray([]
                ),
            });
            this.isLoading = false;
          },
          error => {
            this.alertCtrl
              .create({
                header: 'An error occurred!',
                message: 'Artist could not be fetched. Please try again later.',
                buttons: [
                  {
                    text: 'Okay',
                    handler: () => {
                      this.router.navigate(['/tabs/tab4']);
                    }
                  }
                ]
              })
              .then(alertEl => {
                alertEl.present();
              });
          }
        );
    });
  }

  onAddGenre() {
    const control = new FormControl(this.artist.genre, [Validators.required]);
    (<FormArray>this.arForm.get('genre')).push(control);
  }

  onAddEquipment() {
    const control = new FormControl(this.artist.equipment, [Validators.required]);
    (<FormArray>this.arForm.get('equipment')).push(control);
  }

  addOne() {
    this.steps = this.steps + 1;
    console.log(this.steps);
  }

  minusOne() {
    this.steps = this.steps - 1;
    console.log(this.steps);
  }

  onUpdateArtist() {
    if (!this.arForm.valid) {
      return;
    }
    this.loadingCtrl
      .create({
        message: 'Updating artist...'
      })
      .then(loadingEl => {
        loadingEl.present();
        this.artistService
          .updateArtist(
            this.artist.id,
            this.arForm.value.name,
            this.arForm.value.type,
            this.arForm.value.cost,
            this.arForm.value.equipment,
            this.arForm.value.band,
            this.arForm.value.availableFrom,
            this.arForm.value.availableTo,
            this.arForm.value.descrpition,
            this.arForm.value.genre,
          )
          .subscribe(() => {
            loadingEl.dismiss();
            this.arForm.reset();
            this.router.navigate(['/tabs/tab4']);
          });
      });
  }

  ngOnDestroy() {
    if (this.artistSub) {
      this.artistSub.unsubscribe();
    }
  }
}

snippet of edit-page.page.html:

<ion-content>
  <form [formGroup]="arForm">
    <ion-grid class="ion-padding">
      <div *ngIf="steps === 1">
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
            <h1>Thanks for joining, lets find you a venue</h1>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
            <ion-img
              class="pub-image"
              src="/assets/pub-front.png"
              alt="pub"
            ></ion-img>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
            <h1>Describe your ideal venue</h1>
            <p>Equipment, bar type, availibility etc.</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
            <ion-button (click)="addOne()">Start</ion-button>
          </ion-col>
        </ion-row>
      </div>
      <!--
.
.
.
.
what type of bar page.
.
.
.
. -->
      <div *ngIf="steps === 2">
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2">
            <h1 class="ideal">YOUR IDEAL VENUE</h1>
            <h2>What is the name of your band?</h2>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-item lines="none" type="text" class="box">
              <ion-input formControlName="name" required></ion-input>
            </ion-item>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12" size-sm="8" offset-sm="2">
            <h2>What type of venue are you looking for?</h2>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <ion-item>
              <ion-label>Select</ion-label>
              <ion-select
                formControlName="type"
                value="notifications"
                interface="action-sheet"
                required
              >
                <ion-select-option value="Pub">Pub</ion-select-option>
                <ion-select-option value="Late Bar">Late Bar</ion-select-option>
                <ion-select-option value="Club">Club</ion-select-option>
                <ion-select-option value="Wedding">Wedding</ion-select-option>
                <ion-select-option value="Event">Event</ion-select-option>
              </ion-select>
            </ion-item>
          </ion-col>
        </ion-row>
      </div>

App.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    SharedModule,
    ReactiveFormsModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

edited to add modules that didn't work

Answer 1

Add the BrowserModule inside the imports in the edit-page.module.ts, otherwise, check if the component is registered in the app.module.ts

source