As someone new to Angular and the node ecosystem, I'm facing a challenge that may be due to a simple oversight.
The issue at hand:
In my Angular 11 project within Visual Studio 2019, configured with Typescript 4, attempting to run the project through Visual Studio results in a 404 error page displaying "Cannot GET /". Likewise, running the project using ng build from the command line leads to an array of errors, primarily pointing out missing types such as Iterable, Set, and Map. For example:
Error: node_modules/rxjs/internal/types.d.ts:41:84 - error TS2304: Cannot find name 'Iterable'.This error message surfaces multiple times even when setting the option to es2017 (using es2015 also yields the same errors):
Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.I have searched for "Iterable" within my node_modules/@types folder but could not locate a definition, despite it being referenced in multiple places. I suspect I might be missing a types package, but I am unsure how to identify which one.
An Update:
This issue seems to stem from referencing certain type definitions at the top of one of my services:
///<reference path="../../../../node_modules/typescript/lib/lib.dom.d.ts" />
///<reference path="../../../../node_modules/typescript/lib/lib.d.ts" />
Omitting these references allows the project to build successfully, albeit resulting in numerous highlighted errors in Visual Studio due to missing definitions. On the other hand, adding "skipLibCheck": true, in my tsconfig.json enables the application to build temporarily but does not provide a lasting solution.
My troubleshooting attempts so far:
- I have updated Node.js, NPM, Angular CLI, and all packages in my application.
- Ensured that my package.json includes the latest version of @types/node.
- Confirmed that my tsconfig.json targets es2015, with the lib compiler options containing "es2017" and "dom".
- Verified that these are indeed the files used during the build process by inserting nonsense into them, leading to errors during ng build.
- Deleted the node_modules folder and package-lock.json file, then reinstalled all packages with npm install.
My tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"incremental": true,
"baseUrl": "./",
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
My package.json:
{
// Your package.json content here
}
My angular.json:
{
// Your angular.json content here
}