Question

加载Angular网站并调用Gierb页面上显示的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';放在文件顶部，我也尝试过此操作，并且会出现相同的错误。

这些是我工具的版本（它们都是最新的或非常接近）。角CLI：7.3.6 节点：11.12.0 操作系统：Darwin x64 角度：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 Core功能，这些功能不会在您的浏览器中自动出现。

要使其正常工作，我必须包括一些软件包，在“ polyfill.ts”中添加一些行，并在“ tsconfig.json”中添加一些内容

先决条件

操作系统：Linux x64
角度版本：8.2.14
Angular CLI版本：8.3.20
NodeJS版本：13.3.0
Cheerio版本：1.0.0-rc.3
打字稿版本：3.4.5
webpack版本：4.39.2

解决方案：

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

stream-browserify
string_decoder
事件
缓冲区
过程

单线：

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;

这是针对我发现的相关问题的解答的混合解决方案。他们在这里：

最后一步是在“ tsconfig.json”中为流模块添加路径，以将其映射到stream-browserify中的node-modules包中：（如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中看到）

可能相关的问题

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();

如何在Angular中使用Cheerio？

2 个答案:

先决条件

解决方案：

注释和见解

可能相关的问题