Newly created angular project has errors

Question

for some unknown reason a freshly generated angular 14.1 project does not work. it seems like npm i will download corrupt libs. deleting node_modules won't help.. the file (node_modules/@types/node/stream/web.d.ts) in my existing projects looks differently.. i wasn't able to find anything similar on the internet... any idea? thanks!

Error: node_modules/@types/node/stream/web.d.ts:484:13 - error TS2502: 'ReadableByteStreamController' is referenced directly or indirectly in its own type annotation.

484         var ReadableByteStreamController: typeof globalThis extends
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@types/node/stream/web.d.ts:503:13 - error TS2502: 'ReadableStreamBYOBReader' is referenced directly or indirectly in its own type annotation.

503         var ReadableStreamBYOBReader: typeof globalThis extends { onmessage: any; ReadableStreamBYOBReader: infer T }
                ~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@types/node/stream/web.d.ts:513:13 - error TS2502: 'ReadableStreamBYOBRequest' is referenced directly or indirectly in its own type annotation.

513         var ReadableStreamBYOBRequest: typeof globalThis extends { onmessage: any; ReadableStreamBYOBRequest: infer T }
                ~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

I had the same issue and just solved it in the following way. Set the skipLibCheck flag to true in the angularCompilerOptions inside your tsconfig.json file.

{
  "angularCompilerOptions": {
    "skipLibCheck": true
  }
}

This tells TypeScript to skip type checking for third-party libraries, which can help avoid circular reference issues.

Answer 2

Downgrade "@types/node" in devDependencies of package.json. "ng new" puts the latest version for this dependency which has breaking changes for a few older features.

"devDependencies": {
    ...
    "@types/node": "^20.3.2",
    ...
  }