Styjun

I am getting errors on Google Dev Tools's console when I load my Angular website and make a call to a Cheerio method load('<h2 class="title">Hello world</h2>'); as shown on the Github page.

This is a brand new application, so all I've done is:
sudo ng new myProject,
sudo chmod -R 777 myProject/,
sudo npm install cheerio --save,
sudo npm install @types/cheerio --save.
Also, because I have gotten errors in the TypeScript compilation in the past, I also ran: sudo npm install stream --save

Atop my app.component.ts file I call import * as cheerio from 'cheerio'; and lastly inside the component:

ngOnInit() 
 cheerio.load('<h2 class="title">Hello world</h2>');

Now, when I run ng serve, the exact error message I get is:

inherits_browser.js:5 Uncaught TypeError: Cannot read property 'prototype' of undefined
 at inherits (inherits_browser.js:5)
 at Object../node_modules/cheerio/node_modules/parse5/lib/parser/parser_stream.js (parser_stream.js:27)
 at __webpack_require__ (bootstrap:78)
 at Object../node_modules/cheerio/node_modules/parse5/lib/index.js (index.js:41)
 at __webpack_require__ (bootstrap:78)
 at Object../node_modules/cheerio/lib/parse.js (parse.js:5)
 at __webpack_require__ (bootstrap:78)
 at Object../node_modules/cheerio/lib/cheerio.js (cheerio.js:5)
 at __webpack_require__ (bootstrap:78)
 at Object../node_modules/cheerio/index.js (index.js:5)
inherits @ inherits_browser.js:5
./node_modules/cheerio/node_modules/parse5/lib/parser/parser_stream.js @ parser_stream.js:27
__webpack_require__ @ bootstrap:78
./node_modules/cheerio/node_modules/parse5/lib/index.js @ index.js:41
__webpack_require__ @ bootstrap:78
./node_modules/cheerio/lib/parse.js @ parse.js:5
__webpack_require__ @ bootstrap:78
./node_modules/cheerio/lib/cheerio.js @ cheerio.js:5
__webpack_require__ @ bootstrap:78
./node_modules/cheerio/index.js @ index.js:5
__webpack_require__ @ bootstrap:78
./src/app/app.component.ts @ main.js:94
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:10
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

Additionally, if you're going to recommend to instead put import load from 'cheerio'; atop the file, I have tried this as well, and the same error appears.

These are the versions of my tools (they're all the latest or very close).
Angular CLI: 7.3.6
Node: 11.12.0
OS: darwin x64
Angular: 7.2.11

Edit: I have tried the solution in Adding Cheerio.js to an Angular 6 project?, and it did not solve the problem, in fact it added another error in the console:

cheerio.js:5 Uncaught ReferenceError: require is not defined
 at cheerio.js:5

I'm not familiar with the cheerio library. I have created a StackBlitz example of how to get this to work though.

The project required me to install a few packages with npm as follows:
npm install cheerio @types/cheerio events string_decoder

Then in the app.component.ts I imported it with: import * as cheerio from 'cheerio'; and used it in the ngOnInit method as follows: cheerio.load('<h2 class="title">Hello world</h2>').xml();