ERROR Nullinjectorerror: R3injectorerror(Appmodule)[ Vendacomponent -> Vendacomponent]No Provider for Vendacomponent!

Question

I am creating a page for sale and when I click to add product is to open a screen with registered products. In the tutorial I was following he added in the constructor a class that has the array with the products, in my case I did the array inside the Component, only it is giving the error I put in the title.

import { Component, OnInit, Inject } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import { ItemProduto } from '../item-produto';
import { HttpClient } from '@angular/common/http';
import { ProdutoModel } from '../produto-model';
import { NgForm } from '@angular/forms';
import { VendaComponent } from '../venda/venda.component';

@Component({
  selector: 'app-item-produto',
  templateUrl: './item-produto.component.html',
  styleUrls: ['./item-produto.component.css']
})
export class ItemProdutoComponent implements OnInit {
  formData:ItemProduto;
  listaProdutos: ProdutoModel[];
  isValid: boolean = true;

  url = 'http://localhost:8080/api/produtos';

  constructor(private http: HttpClient,
    @Inject(MAT_DIALOG_DATA) public data,
    public dialogRef:MatDialogRef<ItemProdutoComponent>,
    private vendaComponent:VendaComponent) { }
   // private vendaComponent:VendaComponent

  ngOnInit(){
    this.getProdutos().then(res => this.listaProdutos = res as ProdutoModel[]);
    if(this.data.itemProdutoIndex==null)
    this.formData ={
      IDITEMPRODUTO: null,
      IDVENDA : this.data.IDVENDA,
      IDPRODUTO:0,
      QUANTIDADE:0,
      ITEMNOME:''
    }
    else
    this.formData = Object.assign({},this.vendaComponent.itemProduto[this.data.itemProdutoIndex]);
  }
  //,this.vendaComponent.itemProduto[this.data.itemProdutoIndex]
  getProdutos(){
    return this.http.get(this.url).toPromise();
  }

  atualizarNomeItem(ctrl){
    if(ctrl.selectedIndex == 0) {
      this.formData.ITEMNOME = '';
    }else{
      this.formData.ITEMNOME = this.listaProdutos[ctrl.selectedIndex-1].NOME;
    }
  }

  onSubmit(form:NgForm){
    if(this.validarForm(form.value)){
      //if(this.data.itemProdutoIndex==null)
      //this.vendaComponent.itemProduto.push(form.value);
      //else
        //this.vendaComponent.itemProduto[this.data.itemProdutoIndex] = form.value;
      this.dialogRef.close();
    }
  }

  validarForm(formData: ItemProduto){
    this.isValid = true;
    if(formData.IDITEMPRODUTO == 0)
      this.isValid = false;
    else if(formData.QUANTIDADE == 0)
      this.isValid = false;
    return this.isValid;
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule} from '@angular/common/http';

import { AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';

import { HomeComponent } from './home/home.component';
import { EditarComponent } from './editar/editar.component';
import { ClienteComponent } from './cliente/cliente.component';
import { ProdutoComponent } from './produto/produto.component';
import { ListagemClientesComponent } from './listagem-clientes/listagem-clientes.component';
import { VendaComponent } from './venda/venda.component';
import { ItemProdutoComponent } from './item-produto/item-produto.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    EditarComponent,
    ClienteComponent,
    ProdutoComponent,
    ListagemClientesComponent,
    VendaComponent,
    ItemProdutoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    BrowserAnimationsModule,
    MatDialogModule,
    ReactiveFormsModule
  ],
  entryComponents: [ItemProdutoComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        ReactiveFormsModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Here is the complete error that is returning me

ERROR NullInjectorError: R3InjectorError(AppModule)[VendaComponent -> VendaComponent -> VendaComponent]: 
  NullInjectorError: No provider for VendaComponent!
    at NullInjector.get (http://localhost:4200/vendor.js:32682:27)
    at R3Injector.get (http://localhost:4200/vendor.js:46410:33)
    at R3Injector.get (http://localhost:4200/vendor.js:46410:33)
    at R3Injector.get (http://localhost:4200/vendor.js:46410:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:63757:33)
    at Object.get (http://localhost:4200/vendor.js:61599:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:36209:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:50327:12)
    at NodeInjectorFactory.ItemProdutoComponent_Factory [as factory] (http://localhost:4200/main.js:647:579)
    at getNodeInjectable (http://localhost:4200/vendor.js:36354:44)
defaultErrorLogger @ core.js:5871

Answer 1

you need to put the

@Injectable({ providedIn: 'root' })

in the Vendacomponent before sport it and also import the

import {Injectable} from '@angular/core';