如何在Angular中使用Cheerio？

Question

当我加载我的Angular网站并调用Github页面上显示的Cheerio方法load('<h2 class="title">Hello world</h2>');时，我在Google Dev Tools的控制台上收到错误。

这是一个全新的应用程序，所以我所做的就是：sudo ng new myProject、sudo chmod -R 777 myProject/、sudo npm install cheerio --save、sudo npm install @types/cheerio --save。另外，因为我在过去的TypeScript编译中遇到过错误，所以我还运行了：sudo npm install stream --save

在我的app.component.ts文件上，我调用了import * as cheerio from 'cheerio';，最后在组件内部调用：

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

现在，当我运行ng serve时，我得到的确切错误消息是：

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

此外，如果您要建议将import { load } from 'cheerio';放在文件的顶部，我也尝试过此方法，并且出现了相同的错误。

这些是我的工具的版本(它们都是最新的或者非常接近)。Angular命令行界面: 7.3.6节点: 11.12.0操作系统: darwin x64 Angular: 7.2.11

编辑:我已经在Adding Cheerio.js to an Angular 6 project?中尝试了这个解决方案，但它没有解决问题，实际上它在控制台中添加了另一个错误：

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

Answer 1

我也想在Angular中使用cheerio，但是仅仅添加这个包并不能解决问题。问题是缺少NodeJS依赖项。Cheerio使用一些NodeJS核心功能，这些功能不会自动出现在您的浏览器中。

为了让它正常工作，我必须包含一些包，在"polyfill.ts“中添加一些行，在"tsconfig.json”中添加一些内容。

我的解决方案是：

首先，我在npm中包含了以下包：

• stream-browserify
• string_decoder
• events
• buffer
• process

一行：

npm install stream-browserify string_decoder events buffer process

不过，您有可能不需要所有这些包。

然后，我在“polyfill.ts”中添加了以下几行：

// cheerio nodejs emulating imports
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;

这是对相关问题的答案和我发现的问题的混合解决方案。下面是它们：

• 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
• StackOverflow Answer: Angular 6 Uncaught ReferenceError: Buffer is not defined

我的最后一步是在"tsconfig.json“中添加流模块的路径，以将其映射到node-modules中的stream-browserify包：(如this answer所示)

tsconfig.json：

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

我在根目录(与“package.json”相同的目录)编辑了"tsconfig.json“。

笔记和见解

• 按照cheerio-without-node-native中的建议安装an issue on the cheerio GitHub对我不起作用，我搬离了它，因为它现在是stream包对我不起作用。(在this issue)

中显示

可能相关的问题

• xml2js in Angular 6: Can't resolve 'stream' and 'timers'
• GitHub: nodejs/readable-stream #237

Answer 2

我不熟悉cheerio库。不过，我已经创建了一个如何让它工作的StackBlitz example。

这个项目需要我用npm安装几个包，如下所示：npm install cheerio @types/cheerio events string_decoder

然后在app.component.ts中，我使用：import * as cheerio from 'cheerio';导入它，并在ngOnInit方法中使用它，如下所示：cheerio.load('<h2 class="title">Hello world</h2>').xml();