Tips on integrating Cheerio with Angular framework

Question

Tips on integrating Cheerio with Angular framework

My Angular website is encountering errors in Google Dev Tools's console when I utilize a Cheerio method

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

as per the instructions on the Github page.

This application is fresh, and the steps I took are as follows: sudo ng new myProject, sudo chmod -R 777 myProject/, sudo npm install cheerio --save,

sudo npm install @types/cheerio --save

. To preempt any TypeScript compilation errors that may arise, I also executed: sudo npm install stream --save

In my app.component.ts file, I imported Cheerio using

import * as cheerio from 'cheerio';

and within the component itself:

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

Upon running ng serve, the specific error message displayed 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

Furthermore, attempting to fix the issue by placing import { load } from 'cheerio'; at the top of the file has not resolved the error.

The versions of my tools are as follows (all latest or close to it): Angular CLI: 7.3.6 Node: 11.12.0 OS: darwin x64 Angular: 7.2.11

Edit: Following the solution provided in Adding Cheerio.js to an Angular 6 project? did not rectify the issue; instead, it introduced another error in the console:

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

angular typescript cheerio

Answer 1

Answer №1

When attempting to integrate cheerio with Angular, simply adding the package was not sufficient. The hurdle I faced was due to missing NodeJS dependencies that cheerio relies on, which are not inherently available in the browser environment.

To resolve this issue, I needed to include additional packages, modify the "polyfill.ts" file, and adjust the "tsconfig.json" configuration.

Here's how I tackled the problem:

Initially, I installed the following npm packages:

stream-browserify
string_decoder
events
buffer
process

One simple command to install these packages:

npm install stream-browserify string_decoder events buffer process

It's worth noting that not all of these packages may be necessary for your specific use case.

Next, I made modifications to the "polyfill.ts" file as follows:

// Emulating nodejs imports for cheerio
import * as process from 'process';
window['process'] = process;

(window as any).global = window;
var global = global || window;

import * as bufferModule from "buffer"
global.Buffer = global.Buffer || bufferModule.Buffer;

This solution is a combination of insights gleaned from similar issues and questions I came across during my research.

Related StackOverflow Answer: angular 6 ERROR ReferenceError: “process is not defined” with elasticsearch js
GitHub Issue Comment: Uncaught ReferenceError: global is not defined in latest Angular 6 RC #678
Relevant StackOverflow Answer: Angular 6 Uncaught ReferenceError: Buffer is not defined

Lastly, I configured a path in the "tsconfig.json" file to map the stream module to the stream-browserify package located in the node-modules directory, as detailed in this answer:

tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "stream": [
        "node_modules/stream-browserify"
      ]
    }
  }
}

I made these adjustments to the "tsconfig.json" file in the root directory, alongside the "package.json" file.

Additional Notes and Insights:

Attempting to install cheerio-without-node-native as suggested in a GitHub issue related to cheerio proved unsuccessful for me, prompting me to discontinue its use due to deprecation.
My attempt to install the stream package was also unsuccessful, as highlighted in this reported issue.

Related Issues to Explore:

Troubleshooting xml2js Integration in Angular 6: 'stream' and 'timers' Resolution
GitHub Discussion: nodejs/readable-stream #237

Answer 2

When attempting to integrate cheerio with Angular, simply adding the package was not sufficient. The hurdle I faced was due to missing NodeJS dependencies that cheerio relies on, which are not inherently available in the browser environment.

To resolve this issue, I needed to include additional packages, modify the "polyfill.ts" file, and adjust the "tsconfig.json" configuration.

Here's how I tackled the problem:

Initially, I installed the following npm packages:

stream-browserify
string_decoder
events
buffer
process

One simple command to install these packages:

npm install stream-browserify string_decoder events buffer process

It's worth noting that not all of these packages may be necessary for your specific use case.

Next, I made modifications to the "polyfill.ts" file as follows:

// Emulating nodejs imports for cheerio
import * as process from 'process';
window['process'] = process;

(window as any).global = window;
var global = global || window;

import * as bufferModule from "buffer"
global.Buffer = global.Buffer || bufferModule.Buffer;

This solution is a combination of insights gleaned from similar issues and questions I came across during my research.

Related StackOverflow Answer: angular 6 ERROR ReferenceError: “process is not defined” with elasticsearch js
GitHub Issue Comment: Uncaught ReferenceError: global is not defined in latest Angular 6 RC #678
Relevant StackOverflow Answer: Angular 6 Uncaught ReferenceError: Buffer is not defined

Lastly, I configured a path in the "tsconfig.json" file to map the stream module to the stream-browserify package located in the node-modules directory, as detailed in this answer:

tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "stream": [
        "node_modules/stream-browserify"
      ]
    }
  }
}

I made these adjustments to the "tsconfig.json" file in the root directory, alongside the "package.json" file.

Additional Notes and Insights:

Attempting to install cheerio-without-node-native as suggested in a GitHub issue related to cheerio proved unsuccessful for me, prompting me to discontinue its use due to deprecation.
My attempt to install the stream package was also unsuccessful, as highlighted in this reported issue.

Related Issues to Explore:

Troubleshooting xml2js Integration in Angular 6: 'stream' and 'timers' Resolution
GitHub Discussion: nodejs/readable-stream #237

Answer 3

Answer №2

I have yet to explore the wonders of the cheerio library. However, I took the initiative to create a live demo on StackBlitz to demonstrate how it can be utilized.

For this project, I had to utilize npm to install the necessary packages by running the command:

npm install cheerio @types/cheerio events string_decoder

In the app.component.ts file, I proceeded to import cheerio using:

import * as cheerio from 'cheerio';

and implemented it within the ngOnInit method like this:

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

Answer 4

I have yet to explore the wonders of the cheerio library. However, I took the initiative to create a live demo on StackBlitz to demonstrate how it can be utilized.

For this project, I had to utilize npm to install the necessary packages by running the command:

npm install cheerio @types/cheerio events string_decoder

In the app.component.ts file, I proceeded to import cheerio using:

import * as cheerio from 'cheerio';

and implemented it within the ngOnInit method like this:

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

Tips on integrating Cheerio with Angular framework

Answer №1

Here's how I tackled the problem:

Additional Notes and Insights:

Related Issues to Explore:

Answer №2

Similar questions

Type the query into the search bar on the website, hit the submit button, and receive the search results

Leveraging the outcome of an Observable in one method with another Observable in Angular2

Retrieving Headers from a POST Response

Forcing locale in Angular 2: A step-by-step guide

The compatibility issue arises when using Material UI Portal with TypeScript, specifically with the 'children' property types

connect the validation of forms to different components

Creating dynamic HTML templates in Webstorm using template strings with Angular 2

Why does the server attempt to load the chart in Angular 10 Universal using Amcharts 4?

Trouble arises when applying CSS to ng-x accordion styling

Enhance your Typescript code with a type guard that supports optional wrapped types

Neglecting the error message for type assignment in the Typescript compiler

Step-by-step guide on deploying Angular Universal

Experiencing problems with React createContext in Typescript?

Angular 14 troubleshooting: Issues with using getRawValue() in IndexOf function

I am looking to extract only the alphanumeric string that represents the Id from a MongoDB query

What is the purpose of RouterLink and RouterOutlet in Angular?

How can I utilize npm with the original source code instead of minified or bundled code?

Angular 2: Implementing service functions on button click using the (click) event

Sign out from Azure Active Directory using the ADAL library in an Angular application written in TypeScript

Utilizing Mongoose Schema Enums Alongside TypeScript Enums