Error reloading a page with Angular

1

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   ClientService! Error: No provider for ClientService! 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   ...

The following is the code for the Client Component:

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 was able to:

@Component({
selector: 'app-cliente',
templateUrl: './cliente.component.html',
providers: [ClienteService]
})
    
asked by anonymous 18.10.2017 / 06:09

1 answer

0
  

Error: No provider for ClientService! Error: No provider for   ClientService!

This error occurs whenever you use a service that has not been declared as provider in the app-component or has not been properly imported.

    
03.11.2017 / 22:51