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: edacted edacted edacted\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: edacted edacted edacted ode_modules@ngtools\webpack\src\angular_compiler_plugin.js:933:23) at C: edacted edacted edacted ode_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: edacted edacted edacted\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: edacted edacted edacted ode_modules@ngtools\webpack\src\angular_compiler_plugin.js:933:23) at C: edacted edacted edacted ode_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"]
}

user_2148311 · Answer

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/)

user_17198110 · Answer

I had this problem today, and after wasting a few hours on it, eventually I found the solution.

I was using a symlink to my project and it appeared to be that The problem repeated itself only when accessing the project from that symlink. But from the original path, everything worked fine.

Seems that some package there is using an absolute path instead of relative to the project root directory.

To recap: if you are using a symlink (also known as junction link) try accessing the project from the original path

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

2 Answers