Angular & puppeteer 安装错误

Question

我开始了一个新的 angular 项目，我想从网站上抓取一些数据并将其重新显示在我的页面上。我希望开始一个新项目，只需 NPM install puppeteer 即可启动运行ning，但编译器在我安装 puppeteer 后抛出多个错误。

我已经使用 ng new 安装了 angular 并使用 NPM 添加了 puppeteer，但是当我运行代码时，我收到以下错误：

ERROR in node_modules/puppeteer/lib/types.d.ts(6,13): error TS1005: '=' expected.
node_modules/puppeteer/lib/types.d.ts(6,31): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,46): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,59): error TS1011: An element access expression should take an argument.

这些问题具体是 puppeteer 中的这两行代码：

import type { Readable } from 'stream';
//... and...
export declare type JSONArray = readonly Serializable[];

我正在使用 nodejs 版本 v16.13.2，我已经将 typescript 升级到版本 4.6.2 并尝试升级 @types/node 因为它之前抛出错误。如果我将 @types/node 升级到最新版本，我的错误列表会升级到更多问题

ERROR in node_modules/@types/node/assert.d.ts(12,72): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(229,72): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(400,98): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(400,105): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(400,108): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(432,102): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(432,109): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(432,112): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(734,51): error TS1144: '{' or ';' expected.
node_modules/@types/node/assert.d.ts(734,57): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(734,60): error TS1005: ';' expected.
node_modules/@types/node/assert.d.ts(892,65): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(6,13): error TS1005: '=' expected.
node_modules/puppeteer/lib/types.d.ts(6,31): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,46): error TS1005: ';' expected.
node_modules/puppeteer/lib/types.d.ts(3460,59): error TS1011: An element access expression should take an argument.

所以我回滚到版本 12.0.2，我只遇到了人偶问题。

我目前的package.json是：

{
  "name": "ciaw-scrapper",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "puppeteer": "^13.5.0",
    "rxjs": "~6.3.3",
    "sass": "^1.49.9",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.4",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.0.2",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

当我运行在较新版本的 angular (13) 和 CLI 上进行第二次尝试时，我得到了一组完全不同的错误：

./node_modules/puppeteer/node_modules/ws/lib/buffer-util.js:103:21-42 - Warning: Module not found: Error: Can't resolve 'bufferutil' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\puppeteer\node_modules\ws\lib'

./node_modules/puppeteer/node_modules/ws/lib/validation.js:109:22-47 - Warning: Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\puppeteer\node_modules\ws\lib'



./node_modules/fs-constants/browser.js:1:0-37 - Error: Module not found: Error: Can't resolve 'constants' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\fs-constants'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
        - install 'constants-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "constants": false }

./node_modules/glob/glob.js:49:13-30 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\Users\james\Desktop\scraper\ciaw-scraper\node_modules\glob'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }


........ (this continues on like this

我尝试在 package.json 中添加以下内容来解决这些问题，但这并没有解决问题：

"browser": {
   "fs": false,
   "path": false,
   "os": false
}

我也尝试通过 NPM 添加 path 和 stream。

我之前在一个小的 javascript 项目中尝试过 puppeteer，并且一切正常运行ning，但是在 angular 之上添加它到目前为止还没有奏效。

Answer 1

Puppeteer 是一个 node.js 库 - 它无法在浏览器中运行 as-is。

这里有额外的文档 doc，似乎已经过期了。

Angular & puppeteer 安装错误

Angular & puppeteer installation errors

npm

typescript

angular

puppeteer