Typescript - “Cannot find name” errors on html templates

I am migrating my existing Angular 7 code to Angular 9. I followed the Angular Upgrade guide. I am getting a lot of "Cannot find name" errors on the html template of the components. Even the index.html page.

Here is the template in question:

<!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>

All the html tags and attribute show up in red lines and give me errors like:-

• 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'.

and so on.

Every html template in the code is like this. After upgrade the angular version is ~9.1.0 and typescript version is ~3.8.3.

Even after all these errors the code is running correctly.

My tsconfig.json file:-

{
    "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 red lines on the html are a big distraction and I would greatly appreciate some help!