我已經開始了一個新的 Angular 專案，我想從網站上抓取一些資料并將其重新顯示在我的頁面上。我希望啟動一個新專案，只需 NPM install puppeteer 即可啟動并運行，但在我安裝 puppeteer 后編譯器會拋出多個錯誤。
我已經ng new使用 NPM 安裝了 angular 并添加了 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 version v16.13.2，我已經將 typescript 升級到 version4.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我只得到 puppeteer 問題的版本。
我當前的 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
}
我也嘗試過添加path和stream通過 NPM。
我之前在一個小型 javascript 專案中嘗試過 puppeteer，并且所有內容都已啟動并運行，但將它添加到 angular 上到目前為止還沒有奏效。
uj5u.com熱心網友回復：
Puppeteer 是一個 node.js 庫 - 它不能在瀏覽器中按原樣作業。
這里有額外的檔案doc，似乎已經過期。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442292.html