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
