Hi there. 

I'm developing an web program based on asp.net core and angular using visual studio 2019. 

i thought that i added IgniteUI components to my existing web program by npm

but i got a error message that "TS2304: (TS) Cannot find name 'lgGrid'.

the rest of source code is as follows. (please help me and thanks)

-----------------------------------------------------------------------------------------------------------------------------------------------------------

import { Component, ViewChild } from '@angular/core';
import * as $ from 'jquery';
import { IgGridComponent } from 'projects/igniteui-angular-wrappers/src/public-api';
import { Northwind } from '../shared/northwind';
//import { IgGridComponent } from 'projects/igniteui-angular-wrappers/src/lib/iggrid/iggrid.component';

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

@Component({
selector: 'app-grid-data-binding',
templateUrl: './grid-data-binding.component.html',
styleUrls: ['./grid-data-binding.component.css']
})

export class HomeComponent {

/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

title = 'My Ignite UI Project';

localData = [
{ Name: 'John', Age: 29 },
{ Name: 'Alice', Age: 27 },
{ Name: 'Jessica', Age: 31 }
];

ngOnInit() {

}

Testing() {
var name = $("#txtName").val();
alert(name);
}

export class GridDataBindingComponent {

public gridOptions: IgGrid;
public id: string;
public data: any;
public newProduct: any;
@ViewChild('grid1', { static: true }) grid: IgGridComponent;
// private deleteRecord: any;

constructor() {
this.data = Northwind.getData();

this.id = 'grid1';
this.newProduct = this.createNewProduct();

this.gridOptions = {
autoCommit: true,
width: '100%',
height: '400px',
autoGenerateColumns: false,
columns: [
{ key: 'ProductID', headerText: 'Product ID', width: '50px', dataType: 'number' },
{ key: 'ProductName', headerText: 'Name', width: '250px', dataType: 'string' },
{ key: 'QuantityPerUnit', headerText: 'Quantity per unit', width: '250px', dataType: 'string' },
{ key: 'UnitPrice', headerText: 'Unit Price', width: '100px', dataType: 'number', template: jQuery('#colTmpl').html() }
],
primaryKey: 'ProductID',
features: [
{
name: 'Updating',
columnSettings: [
{ columnKey: 'ProductID', readOnly: true }
]
},
{
name: 'Paging',
pageSize: 10
},
{
name: 'Filtering'
},
{
name: 'Sorting'
}
]
};
}

createNewProduct() {
const newProduct = {
ProductID: this.data.length + 1,
ProductName: null,
QuantityPerUnit: null,
UnitPrice: null
};
return newProduct;
}

addRecord() {
this.data.push(this.newProduct);
this.newProduct = this.createNewProduct();
}

deleteRecord(val) {
let ind = 0;
this.data.filter((item, index) => {
if (item.ProductID === val) {
ind = index;
}
return item.ProductID === val;
});
this.data.splice(ind, 1);
}

}