Unable to connect woocommerce rest api with angular 4 - wordpress

Question

I am trying to connect my woocommerce rest api with angular 4 to fetch product list in my ionic 3 project but every time url throw 404 not found errror i am not able to understand what i am doing wrong
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import * as WC from 'woocommerce-api';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
WooCommerce: any;
constructor(public navCtrl: NavController) {
this.WooCommerce = WC({
url: "http://localhost:8100/wordpress/wp-json/",
consumerKey: "ck_4d99b09e85e45a11282fe2150945fc2090eea0f0",
consumerSecret: "cs_3acf2c3eeb334ab84309e890a5070f8509de9201"
});
this.WooCommerce.getAsync("products").then( (data) => {
console.log(data);
}, (err) => {
console.log(err);
});
}
}

Answer 1

First thing Santosh you should always avoid using your private keys while asking questions , just mention like i did.
i am using this api currently in my app and faced the same issue, try using the exact same url which you use to open the site locally.
i think changing your url to just "http://localhost:8100/wordpress/" should work
this.WooCommerce = WC({
url: "http://localhost:8100/wordpress/",
consumerKey: "your consumer key",
consumerSecret: "your consumer secret"
});
or else in my case i just passed version along it and it worked, you can check by passing both wpApi and version and hopefully that works
this.WooCommerce = WC({
url: "http://localhost:8100/wordpress/",
consumerKey: "your consumer key",
consumerSecret: "your consumer secret",
wpAPI: true,
version: 'v3'
});

Answer 2

I was also facing this issue but now i got the solution.
Just add these lines in .htaccess file that is in your woocommerce folder.
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
And set the url in home.ts like
url: "http://localhost:8100/wordpress/",
instead of
url: "http://localhost:8100/wordpress/wp-json/",