Ggtcf

I'm trying to add a 'shopping' section to my Angular 6 application. This shopping section will contain a search bar which will search Amazon and return a list of whatever the user wants. For example, the user searches a hammer, the list will contain hammers.
To do this, I am trying to web scrape by using Cheerio. When trying to declare this in my TypeScript file:

declare var require: any;
const request = require("request");
const cheerio = require("cheerio");

I get the following error in my webpage:

Any help would be greatly appreciated, or any advice on an alternative solution to what I'm trying to achieve would be very helpful.

If you're running your code in the browser, you will want to use more than just the typescript compiler to build your project. This is because the browser doesn't natively support calls to require. Not to worry, don't let this deter you! There are tons of mature tools that address this specific problem by bundling up the code being required into file(s) that can be used in the browser.

There's a whole section about these build tools in the documentation: https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html

TypeScript uses import as opposed to require.

The correct statement is: import * as cheerio from 'cheerio';.

I would also recommend installing the type Cheerio from here.

Furthermore, try doing things the "Angular way". Angular comes with a bunch of pre-packaged tools including Request from @angular/common/http read more about it here.

The easiest way to come about your scraper, supposing that you don't wish to have any backend implementation running on the side, is to make a service with public methods to would allow you to keep everything in that one file therefore keeping your component code clean and "to the point".