@angular/CLI Project Construction--httpclient

App.module.ts Update

Imports: [    Httpclientmodule]

Product.component.ts

Import{Component, OnInit} from ' @angular/core ';Import{HttpClient} from ' @angular/common/http ';Import{Observable} from ' Rxjs/observable ';Import* As _ from ' Lodash '; @Component ({selector:' App-product ', Templateurl:'./product.component.html ', Styleurls: ['./product.component.css ']}) exportclassProductcomponentImplementsOnInit {products:string[]; Constructor (Privatehttp:httpclient) {} ngoninit () { This. Http.get (' Assets/json/product.json '). Subscribe (Data= {         This. Products = data[' products '];  }); }}

Assets/json/product.json Add

{  "products": [    {      "id": "1",      "name": "First Commodity",      "price": " 899 ",      " rating ":" 3.5 ",      " desc ":" Apple Phone ",      " category ":" Electronic Products "     },    {      "id": "2",      "name": "Second Commodity",      "price": "899",      "rating": "4",      "desc": "Lenovo Computer",      "category": "Electronic Product"    }  ]}

@angular/CLI Project Construction--httpclient