typescript - core.js:4197 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined TypeError: Cannot read property 'id' of undefined

Question

I've been trying to add a FormGroup into my editproject.page.ts and this is the error the console throws at me.

core.js:4197 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'id' of undefined
TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:24134)
    at core.js:24145
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:24145)
    at new NgModuleFactory$1 (core.js:24242)
    at Compiler_compileModuleSync__POST_R3__ (core.js:27027)
    at Compiler_compileModuleAsync__POST_R3__ [as compileModuleAsync] (core.js:27032)
    at MergeMapSubscriber.project (router.js:3463)
    at MergeMapSubscriber._tryNext (mergeMap.js:46)
    at MergeMapSubscriber._next (mergeMap.js:36)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

My project-edit.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, FormGroup, FormBuilder, Validators  } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ProjectEditPageRoutingModule } from './project-edit-routing.module';
import { ProjectEditPage } from './project-edit.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ProjectEditPageRoutingModule,
    FormGroup,
    FormBuilder,
    Validators
  ],
  declarations: [ProjectEditPage]
})
export class ProjectEditPageModule {}

My project-edit.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/Project';
import { ClientsService } from 'src/app/services/clients.service';
import { ProjectService } from 'src/app/services/project.service';
import { DataService } from 'src/app/services/data.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-project-edit',
  templateUrl: './project-edit.page.html',
  styleUrls: ['./project-edit.page.scss'],
})

export class ProjectEditPage implements OnInit {
  editionForm: FormGroup;
  project: Project;
  
  constructor(private formBuilder: FormBuilder, public projectService: ProjectService, private route: ActivatedRoute, private clientService: ClientsService, private router: Router, private dataService: DataService) { 
    this.project = new Project();
  }

  ngOnInit() {
    this.editionForm = this.formBuilder.group({
      projectName: ['', Validators.required],
    });
     if (this.route.snapshot.data['project']) {
      this.project = this.route.snapshot.data['project'];
     }
  }

My project-edit.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Edición de Proyecto</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <section class="createform">
    <form [formGroup]="this.editionForm" (ngSubmit)="update()" >
       <!-- <section class="formfields"> 
          <ion-label>Nombre:</ion-label>
          <ion-input type="string" placeholder="Nombre Proyecto" formControlName="projectName" required> 
          </ion-input>
       </section>  -->
       <!-- <div style="color: red;" *ngIf="!createform.controls.projectName.valid &&
              createform.controls.projectName.touched" class="validator-error">
        Please enter a valid project name.
       </div>-->
    </form>
  </section>
</ion-content>

My project.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProjectRoutingModule } from './project-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { AddProjectComponent } from './add-project/add-project.component';
import { IonicModule } from '@ionic/angular';
import { ListProjectComponent } from './list-project/list-project.component';
import { ProjectComponent } from './project/project.component';
import { SharedModule } from 'src/app/shared/shared.module';

@NgModule({
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [
    CommonModule,
    ProjectRoutingModule,
    ReactiveFormsModule,
    MatIconModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    FormsModule,
    MatSnackBarModule,
    IonicModule,
    SharedModule,
  ],
  entryComponents: [AddProjectComponent, ListProjectComponent],
  declarations: [AddProjectComponent, ListProjectComponent, ProjectComponent],
  exports: [ListProjectComponent]
})
export class ProjectModule { }

I don't know what I'm missing. And before this question about the error message, I had a problem with the Form importations into my module.ts. I can't tell if that error is fixed because of this one I'm having now. I believe if this error message is corrected, the whole thing will work fine. Any answer is welcome and thank you for your answers.

question from:https://stackoverflow.com/questions/65887406/core-js4197-error-error-uncaught-in-promise-typeerror-cannot-read-property

Answer 1

Waitting for answers