Error reloading a page with Angular

Question

I have an application with Angular that if I click the button with:

<a [routerLink]="['/clientes']">

it works normally, but if I reload the page, it gives this error:

An unhandled Exception occurred while Processing the request. Nodeinvocationexception: Uncaught (in Promise): Error: No Provider for Clienteservice! Error: No Provider for Clienteservice! at error (Native) at injectionError (C: Users Frai Desktop study Clientapp dist vendor.js:12066:90) at noProviderError (C: Users Frai Desktop study Clientapp dist vendor.js:12104:12) at Reflectiveinjector_.module.Exports.Reflectiveinjector_.throwOrNull (C: Users Frai Desktop study Clientapp dist vendor.js:13546:19) at Reflectiveinjector.module.exports.Reflectiveinjector_. _getByKeyDefault ...

Follow the Client Component code:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ClienteService } from '../../Services/cliente.service';
import { ICliente } from '../../Models/cliente.interface';
import { FormGroup, FormControl, FormBuilder, Validators } from "@angular/forms";
import { ReactiveFormsModule } from "@angular/forms";

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

export class ClienteComponent implements OnInit {

    clientes: ICliente[] = [];
    cliente: ICliente = <ICliente>{};

    //formulario
    formLabel: string;
    isEditMode: boolean = false;
    form: FormGroup;

    constructor(private clienteService: ClienteService, private fb: FormBuilder) {
        this.form = fb.group({
            "nome": ["", Validators.required],
            "endereco": ["", Validators.required],
            "telefone": ["", Validators.required],
            "email": ["", Validators.required]
        });

        this.formLabel = "Adicionar Cliente";
    }


    ngOnInit() {
        this.getClientes();
    }

    private getClientes() {
        this.clienteService.getClientes().subscribe(
            data => this.clientes = data,
            error => alert(error),
            () => console.log(this.clientes)
        );
    }


    onSubmit() {
        this.cliente.nome = this.form.controls["nome"].value;
        this.cliente.endereco = this.form.controls["endereco"].value;
        this.cliente.telefone = this.form.controls["telefone"].value;
        this.cliente.email = this.form.controls["email"].value;

        if (this.isEditMode) { // editar
            this.clienteService.editCliente(this.cliente)
                .subscribe(response => {
                    this.getClientes();
                    this.form.reset();
                });
        } else { // incluir
            this.clienteService.addCliente(this.cliente)
                .subscribe(response => {
                    this.getClientes();
                    this.form.reset();
                });
        }
    };

    edit(cliente: ICliente) {
        this.formLabel = "Editar Cliente";
        this.isEditMode = true;
        this.cliente = cliente;
        this.form.get("nome")!.setValue(cliente.nome);
        this.form.get("endereco")!.setValue(cliente.endereco);
        this.form.get("telefone")!.setValue(cliente.telefone);
        this.form.get("email")!.setValue(cliente.email);
    };

    cancel() {
        this.formLabel = "Adicionar Cliente";
        this.isEditMode = false;
        this.cliente = <ICliente>{};
        this.form.get("nome")!.setValue('');
        this.form.get("endereco")!.setValue('');
        this.form.get("telefone")!.setValue('');
        this.form.get("email")!.setValue('');
    };

    delete(cliente: ICliente) {
        if (confirm("Deseja excluir essa cliente?")) {
            this.clienteService.deleteCliente(cliente.id)
                .subscribe(response => {
                    this.getClientes();
                    this.form.reset();
                })
        }
    };
}

Edit: I got it with:

@Component({
selector: 'app-cliente',
templateUrl: './cliente.component.html',
providers: [ClienteService]
})

Answer 1

The two most common ways to solve yourself is: - Placing the Service on providers. - Import component into module and routing.

Answer 2

Error: No Provider for Clienteservice! Error: No Provider for Clienteservice!

This error occurs whenever Voce uses a service that has not been declared as Provider in the app-Component or has not been properly imported there.