Angular & puppeteer installation errors

Question

I've started a new angular project where I want to scrape some data from a website and redisplay it on my page. I expected to start a new project and just NPM install puppeteer to be up and running but the compiler is throwing multiple errors after I installed puppeteer.

I've installed angular with ng new and added puppeteer with NPM, but when I run the code I'm getting the following errors:

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.

these issues are specifically these two lines of code in puppeteer:

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

I'm using nodejs version v16.13.2, I've upgraded typescript to version 4.6.2 and tried upgrading @types/node because it was throwing errors before. If I upgrade @types/node to the latest my error list upgrades to even more issues

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.

So I've rolled back to version 12.0.2 where I only get the puppeteer issues.

My current package.json is:

{
  "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"
  }
}

When I run on a newer version of angular (13) and CLI ,as a second attempt, I get a whole different set of errors:

./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

I've tried adding following to the package.json to fix these, but this didn't fix it:

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

I've also tried adding path and stream through NPM.

I tried puppeteer before in a small javascript project and had everything up and running, but adding it on top of angular has not worked so far.