CODEWITHSUNDEEP
angulartypescript.net-core
GoGo
GoGo

Reputation: 3077

infinite loop detected when the page is refreshed on angular 2 along with dot net core 2.0

I have a dotnet core 2.0 and angular 2 app that allows me to see member details. First I have a list page that displays all the members from sql server database. Then each member has a link to take me to see the details individually. I have a member.service.ts is providing the service. The issue is that when I refresh the details-member.component.html page, the server is keep spinning and returns no value. Only error that I have is "firstName" is not defined. However, without the refresh, everything is working.

member.service.ts

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

@Injectable()
export class MemberService {

constructor(private http: Http) { }

getAllMembers(){
    return this.http.get('/api/members').map(res => res.json());
}

getMember(id:any){
    return this.http.get("/api/members/" + id).map(res => res.json());
}
}

details-member.component.ts

import { Component, OnInit } from '@angular/core';
import { MemberService } from '../../../services/member.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
   selector: 'app-details-member',
   templateUrl: 'details-member.component.html'
})

export class DetailsMemberComponent implements OnInit {
   member: any;
   memberId:number;

constructor(
    private route: ActivatedRoute,
    private router: Router,
    private memberService: MemberService,
) { 
    route.params.subscribe(p => {
        this.memberId = +p['id'];
        if (isNaN(this.memberId) || this.memberId <= 0) {
          router.navigate(['/member/list-members']);
          return; 
        }
      });
}

ngOnInit() { 
    this.memberService.getMember(this.memberId)
    .subscribe(
      v => this.member = v,
      err => {
        if (err.status == 404) {
          this.router.navigate(['/members/list-members']);
          return; 
        }
      });
    }
}

details-member.component.html

<div class="page-header clearfix detailHeading">
    <h1 class="text-muted">Demographic Details</h1>
</div>

<div class="jumbotron">
    <div class="row">
        <div class="col-md-6">
            <p>Full Name : <b>{{ member.firstName }} {{ member.middleName }} 
{{ member.lastName }}</b></p>
        <p>Gender : <b>{{ member.gender }}</b></p>
        <p>Date of Brith : <b>{{ member.dateOfBirth | date }}</b></p>
        <p>Age : <b>{{ member.dateOfBirth | age }}</b></p>
        <p>Race : <b>{{ member.race }}</b></p>
        <p>Education : <b>{{ member.education }}</b></p>
        <p>Address : <b>{{ member.address }}</b></p>
        <p>Emergency Contact Name : <b></b></p>
        <p>Emergency Contact Address : <b></b></p>
        <p>Emergency Contact Phone : <b></b></p>
    </div>
        <div class="col-md-6">
            <hr>
            <div class="alert alert-warning" role="alert">
                Created : <b>{{ member.createdDate | date:'medium' }} by {{ member.createdBy }}</b>
            </div>
            <div class="alert alert-warning" role="alert">
                Last Update : <b>{{ member.updatedDate | date:'medium' }} by {{ member.updatedBy }}</b>
            </div>
        </div>

</div>

The exact error I receieve is :fail: Microsoft.AspNetCore,NodeServices[0] ERROR TypeError: Cannot read propery 'firstName' of undefined. Again the issue happens only when the details page is refreshed.

Upvotes: 1

Views: 669

Answers (1)

GoGo
GoGo

Reputation: 3077

I still don't know what caused this problem but I fixed by changing (adding x in front of asp-prerender-module) the following tag inside the index.cshtml file. 

<app xasp-prerender-module="ClientApp/dist/main-server">Application is Loading...</app>

Upvotes: 1

Related Questions