main.ts and polyfills.ts is missing from the Typescript compilation during upgrade to Angular 9

Question

Im trying to upgrade an angular 8 project to Angular 9, but I'm getting the following error:

fail: Microsoft.AspNetCore.SpaServices[0]
  ERROR in ./src/main.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error:
C:\redacted\redacted\redacted\src\main.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (C:\redacted\redacted\redacted\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:933:23) at C:\redacted\redacted\redacted\node_modules@ngtools\webpack\src\loader.js:41:31 at processTicksAndRejections (internal/process/task_queues.js:89:5) ERROR in ./src/polyfills.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: C:\redacted\redacted\redacted\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (C:\redacted\redacted\redacted\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:933:23) at C:\redacted\redacted\redacted\node_modules@ngtools\webpack\src\loader.js:41:31 at processTicksAndRejections (internal/process/task_queues.js:89:5)

I know there are a few similar threads on Stackoverflow, but none of the answers seem to work for my case. I have inserted ""preserveSymlinks": true" into angular.json and I have tried to move my whole project to c:. main.ts and polyfills.ts are located, where it says they are not, so it's rather confusing.

angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "our-project": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "preserveSymlinks": true,
                        "aot": true,
                        "outputPath": "dist/browser",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "polyfills": "src/polyfills.ts",
                        "assets": ["src/assets"],
                        "styles": [
                            "src/assets/styles/app/icons.css",
                            "src/assets/styles/app/icons.alias.css",
                            "src/assets/styles/lib/animate.css",
                            "src/assets/styles/app/site.less",
                            "src/assets/styles/app/start.less",
                            "src/assets/styles/app/animations.less",
                            "src/assets/styles/app/topimages.less",
                            "src/assets/styles/app/style-apploading.less",
                            "src/assets/styles/app/style.scss",
                            "src/assets/styles/app/menu.less"
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "production": {
                            "budgets": [
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "30kb"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": true,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ]
                        },
                        "es5": {
                            "budgets": [
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "30kb"
                                }
                            ],
                            "tsConfig": "./tsconfig.es5.json"
                        }
                    }
                },
...

tsconfig.app.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "",
        "types": ["node"]
    },
    "files": ["main.ts", "polyfills.ts"],
    "include": ["**/*.d.ts"],
    "includes": ["../node_modules/our-typescript-api/AngularApi.js"]
}

Mick Mick · Accepted Answer · 2020-10-20T13:36:02

After spending half a day trying to solve this, I found out what the problem was 5 minutes after posting the question!!

So instead of having: ""files": ["main.ts", "polyfills.ts"]" inside tsconfig.app.json it should be in tsconfig.json (but prepended with src/)

main.ts and polyfills.ts is missing from the Typescript compilation during upgrade to Angular 9

1 Answers