1
resposta

Error: NG0200: Circular dependency in DI e NullInjectorError

Alguém sabe o que pode ser? Console do Chrome Error NG0200 e Error: Uncaught (in promisse)

O erro apareceu depois que eu segui os passos da aula 02.Login aula 4. Agora só aparece a foto do gatinho, mas o input de usuário e senha sumiu, assim como o botão.

Autenticacao.service.ts :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root',
})
export class AutenticacaoService {
  constructor(private httpClient: HttpClient) {} 

  autenticar(usuario: string, senha: string): Observable<any> {
    return this.httpClient.post('http://localhost:3000/user/login', {
      userName: usuario,
      password: senha,
    });
  }
}

Api rodando no cmd

login.component.html:

<h4 class="text-center">Cadastro de Gatos</h4>

  <form class="form mt-4" (ngSubmit)="login()"> 
    <div class="form-group">
      <input class="form-control" placeholder="Nome do Usuario"
      [(ngModel)]="usuario" 
      name="usuario"
      />

    </div>

    <div class="form-group">
      <input type="password" class="form-control" placeholder="Senha"
      [(ngModel)]="senha"
      name="senha"
      >
    </div>

    <button type="submit" class="btn btn-primary btn-block">Entrar</button>
  </form>

home.module.ts:

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

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login/login.component';
import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    HomeComponent,
    LoginComponent
  ],
  imports: [
    CommonModule,
    HomeRoutingModule,
    FormsModule
  ],
  exports: [HomeComponent]
})
export class HomeModule { }
1 resposta

Olá, Alberto! Tudo bem?

O erro de dependência cíclica explica que algum módulo depende de outro, mas esse outro módulo depende do módulo inicial, ou seja:

  • A depende de B
  • B depende de A

E o Angular não consegue resolver essa questão, pois precisa de um para poder executar o outro. Pode ver mais sobre aqui. Esse é o primeiro erro que aparece no seu console, falando que está ocorrendo no AutenticacaoService. Entretanto, pelo código, não consigo ver nenhuma possibilidade de dependência cíclica.

Outro erro que aparece é o NullInjectorError, que acusa não haver um provedor para o HttpClient, que o seu AutenticacaoService utiliza. Verifique se você possui o HttpClientModule no app.module.ts. E veja se isso também resolve o erro acima.

Se não resolver, por favor, compartilhe o projeto via GitHub.

Espero que ajude!