1
resposta

Looping no carregamento de pagina

Estou tentando fazer uma requisição no metodo ngOnInit da minha aplicação angular, O metodo pega 1 parametro passado pela rota: { path: 'companyhome/:name', component: CompanyhomeComponent },

Apos pegar esse name faco uma busca na api se existe uma empresa com esse name, porem apos a primeira requisição se eu tento acessa a pagina novamente fica carregando infinitamente, coloquei um console.log para ver se esta batendo na api, e os dados apareceram no console do node e no console da api aparece que foi feito 1 requisição não sei oque pode ser, já pesquisei em varios lugares.

este é meu component @Component({ selector: 'app-companyhome', standalone: true, imports: [CommonModule], templateUrl: './companyhome.component.html', styleUrl: './companyhome.component.css' }) export class CompanyhomeComponent implements OnInit{ constructor( private route: ActivatedRoute, private companyService: FindCompanyByNameService ){} dataCompany: any;

ngOnInit(): void { const name = this.route.snapshot.params["name"]; this.companyService.getCompanyByName(name) .pipe(tap(data => console.log('Data received:', data))) .subscribe(dataCompany => { this.dataCompany = dataCompany; }); }

} e este é o servico de busca na api @Injectable({ providedIn: 'root' }) export class FindCompanyByNameService {

private API = environment.apiUrl;

constructor(private http: HttpClient) { }

getCompanyByName(name: string): Observable { return this.http.get(${this.API}/company/name/${name}).pipe( catchError(error => { console.error('Error fetching company by name:', error); return throwError(error); }) ); } }

1 resposta

Para resolver o problema de carregamento infinito no seu componente Angular, tem algumas coisas que tu podes fazer.

  1. Verificação do Componente e Serviço:

    • Componente:
      • Veja se dataCompany é inicializado corretamente.
      • Adiciona um console.log no início do ngOnInit para verificar se está sendo chamado repetidamente.
    • Serviço:
      • Verifica se a API está respondendo corretamente e se há algum problema com a resposta.
  2. Tratamento de Erros:

    • Adiciona um catchError no subscribe do componente para garantir que qualquer erro seja tratado e não cause um loop de carregamento.
  3. Observação do Ciclo de Vida:

    • Verifica se há múltiplos ngOnInit sendo chamados. Pode acontecer se houver redirecionamentos ou navegação forçada.

Teu código com essas verificações:

Componente

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FindCompanyByNameService } from './find-company-by-name.service';
import { catchError, tap } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  selector: 'app-companyhome',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './companyhome.component.html',
  styleUrls: ['./companyhome.component.css']
})
export class CompanyhomeComponent implements OnInit {
  dataCompany: any;

  constructor(
    private route: ActivatedRoute,
    private companyService: FindCompanyByNameService
  ) {}

  ngOnInit(): void {
    console.log('ngOnInit called'); // Verificação de chamada do método

    const name = this.route.snapshot.params["name"];
    console.log('Route parameter name:', name); // Verificação do parâmetro

    this.companyService.getCompanyByName(name)
      .pipe(
        tap(data => console.log('Data received:', data)),
        catchError(error => {
          console.error('Error fetching company data:', error);
          return of(null); // Retorna um valor nulo para evitar looping
        })
      )
      .subscribe(dataCompany => {
        this.dataCompany = dataCompany;
        console.log('Data Company set:', this.dataCompany); // Verificação da resposta
      });
  }
}

Serviço

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class FindCompanyByNameService {
  private API = environment.apiUrl;

  constructor(private http: HttpClient) { }

  getCompanyByName(name: string): Observable<any> {
    return this.http.get(`${this.API}/company/name/${name}`).pipe(
      catchError(error => {
        console.error('Error fetching company by name:', error);
        return throwError(error);
      })
    );
  }
}

Pontos Adicionais pra Verificação

  1. Ambiente da API:

    • Confirme se o URL da API está correto e acessível no ambiente de desenvolvimento.
    • Utilize ferramentas como Postman ou curl para verificar a resposta da API diretamente.
  2. Rede:

    • Certifique-se de que não há problemas de rede que possam estar causando a falha nas requisições.
  3. Ciclo de Vida do Componente:

    • Assegure-se de que o componente não está sendo destruído e recriado repetidamente, o que pode causar chamadas múltiplas ao ngOnInit.

Se puder, manda lá no discord que é até melhor de te ajudar.

Abs.