I recently upgraded my Angular 7 code to Angular 9 by following the steps outlined in the Angular Upgrade guide. However, upon completion of the migration process, I started encountering numerous "Cannot find name" errors within the HTML templates of my components, including the index.html page.
The specific template causing issues is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My application</title>
<!-- base href is set in angular.json -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
</head>
<body class="style-1">
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<app-root></app-root>
</body>
</html>
Upon inspection, all HTML tags and attributes are highlighted with red lines, generating errors such as:-
- Error:(1, 3) TS2304: Cannot find name 'doctype'.
- Error:(1, 11) TS2304: Cannot find name 'html'.
- Error:(2, 2) TS2304: Cannot find name 'html'.
- Error:(3, 2) TS2304: Cannot find name 'head'.
- Error:(4, 6) TS2304: Cannot find name 'meta'.
- Error:(4, 11) TS2304: Cannot find name 'charset'.
- Error:(4, 19) TS2365: Operator '>' cannot be applied to types 'string' and 'number'.
- Error:(5, 6) TS2304: Cannot find name 'meta'.
This trend persists across all HTML templates after upgrading to Angular version ~9.1.0 and TypeScript version ~3.8.3.
Interestingly, despite these errors, the code continues to function correctly.
Here is a snippet from my tsconfig.json file for reference:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"downlevelIteration": true,
"outDir": "src/main/webapp/dist",
"paths": {
"app/*": ["src/main/webapp/app/*"]
},
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"include": [
"src/main/webapp/main.ts",
"src/main/webapp/polyfills.ts",
"src/main/webapp/app"
],
"exclude": [
"node_modules"
]
}
The persistent red lines on the HTML elements are proving to be a significant distraction, and I am seeking assistance to address this issue effectively!