File 'src\main.ts' is missing from the TypeScript compilation.

[toddhd]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

I am running Node v18.17.1 and Angular 17 which I just downloaded yesterday. I created a new project yesterday, it worked fine, went to bed. Got up, went to go keep working on the project, and got the error below (main.ts is missing).

After a while I gave up, decided to just create new project all over again, so I created a new project. (ng new test) and chose scss and no precompile support. When I go to run the project, I get the error again.

- Building...X [ERROR] File 'src\main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Here is my package.json:

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.1",
    "@angular/cli": "^17.0.1",
    "@angular/compiler-cli": "^17.0.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

I'm not sure how to fix this?

Minimal Reproduction

This happens upon creation of a new project for me.

ng new test

When asked, select "SCSS" for CSS, and "No" to the question of precompilation features.

When the project is complete, change to the newly created "test" folder and run

ng s --o

Error appears during build.

Exception or Error

- Building...X [ERROR] File 'src\main.ts' is missing from the TypeScript compilation. [plugin angular-compiler]
  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Your Environment

Angular CLI: 17.0.1
Node: 18.17.1
Package Manager: npm 10.2.3
OS: win32 x64

Angular: 17.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.1
@angular-devkit/build-angular   17.0.1
@angular-devkit/core            17.0.1
@angular-devkit/schematics      17.0.1
@angular/cli                    17.0.1
@schematics/angular             17.0.1
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

This was literally working the evening before. The last thing I did before bed was run the app. I woke up this morning, went to go run it again, and this error appeared.

I would also like to note that I have also tried to uninstall (using npm uninstall, plus I cleared the cache) and reinstall Angular, it made no difference.

[alan-agius4]

Mind sharing the broken project please?

[toddhd]

Thanks Alan, please tell me the best way to do that? Should I zip up "test" and send it to you? (Perhaps minus the "node_modules")?

[toddhd]

FYI, I updated to the latest LTS of Node.js and NPM as well.

$ npm -v
10.2.3

$ node -v
v20.9.0

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.2.3
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version

@angular-devkit/architect 0.1700.0
@angular-devkit/build-angular 17.0.0
@angular-devkit/core 17.0.0
@angular-devkit/schematics 17.0.0
@angular/cli 17.0.0
@angular/ssr 17.0.0
@schematics/angular 17.0.0
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2

When I create a new project now, I see this at the end...

$ ng n test
? Which stylesheet format would you like to use? SCSS [
https://sass-lang.com/documentation/syntax#scss ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation
(SSG/Prerendering)? No
CREATE test/angular.json (2756 bytes)
CREATE test/package.json (1035 bytes)
CREATE test/README.md (1058 bytes)
CREATE test/tsconfig.json (877 bytes)
CREATE test/.editorconfig (274 bytes)
CREATE test/.gitignore (548 bytes)
CREATE test/tsconfig.app.json (263 bytes)
CREATE test/tsconfig.spec.json (273 bytes)
CREATE test/.vscode/extensions.json (130 bytes)
CREATE test/.vscode/launch.json (470 bytes)
CREATE test/.vscode/tasks.json (938 bytes)
CREATE test/src/main.ts (250 bytes)
CREATE test/src/favicon.ico (15086 bytes)
CREATE test/src/index.html (290 bytes)
CREATE test/src/styles.scss (80 bytes)
CREATE test/src/app/app.component.html (20884 bytes)
CREATE test/src/app/app.component.spec.ts (910 bytes)
CREATE test/src/app/app.component.ts (363 bytes)
CREATE test/src/app/app.component.scss (0 bytes)
CREATE test/src/app/app.config.ts (227 bytes)
CREATE test/src/app/app.routes.ts (77 bytes)
CREATE test/src/assets/.gitkeep (0 bytes)
√ Packages installed successfully.
warning: in the working copy of '.editorconfig', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/extensions.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/launch.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of '.vscode/tasks.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'README.md', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'angular.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package-lock.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.spec.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.component.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.config.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/app.routes.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/index.html', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.ts', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/styles.scss', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.app.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.json', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'tsconfig.spec.json', LF will be replaced by CRLF the next time Git touches it
Successfully initialized git.

[toddhd]

test.zip
Here is the project, minus the node_modules

This is the log from the test app I just created now, that is showing the LF/CRLF erros above (which I have never seen before. This is a Windows 11 machine and has no other OS's on it).

[alan-agius4]

The LF will be replaced by CRLF the next time Git touches it is just a warning that can safely be ignored, you can read more about this in https://stackoverflow.com/questions/17628305/windows-git-warning-lf-will-be-replaced-by-crlf-is-that-warning-tail-backwar. Regarding the errors I am unable to replicate using the reproduction provided.

ng s -o

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB |
main.js             | main          |  23.36 kB |
styles.css          | styles        |  96 bytes |

                    | Initial Total | 106.17 kB

Application bundle generation complete. [10.193 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.1
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.1
@angular-devkit/build-angular   17.0.1
@angular-devkit/core            17.0.1
@angular-devkit/schematics      17.0.1
@angular/cli                    17.0.1
@schematics/angular             17.0.1
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

[toddhd]

Let me ask you this. It's weird that this is happening, and while I understand your comment about the LF's, I noted it to simply point out that something has "changed". I don't normally get those warninigs, and I didn't get them yesterday when I created the initial project which ran just fine... until this morning, when it STOPPED running fine.

Which leads me to wonder if the problem has nothing to with what's on my PC, and perhaps everything to do with NPM? I know you probably aren't an NPM expert, but it is possible that when NPM goes to grab files for a build, that it is getting corrupt files? Does everyone get their NPM files from the same source, or is possible that someone in Boston is getting their files from a different location than someone in Los Angeles? If so, maybe you can't reproduce it because you aren't getting them from the same source as I am?

[alan-agius4]

Let me ask you this. It's weird that this is happening, and while I understand your comment about the LF's, I noted it to simply point out that something has "changed". I don't normally get those warninigs, and I didn't get them yesterday when I created the initial project which ran just fine... until this morning, when it STOPPED running fine.

The mentioned warnings were always present on windows unless core.autocrlf was set to false. (via git config --global core.autocrlf false).

Which leads me to wonder if the problem has nothing to with what's on my PC, and perhaps everything to do with NPM? I know you probably aren't an NPM expert, but it is possible that when NPM goes to grab files for a build, that it is getting corrupt files? Does everyone get their NPM files from the same source, or is possible that someone in Boston is getting their files from a different location than someone in Los Angeles? If so, maybe you can't reproduce it because you aren't getting them from the same source as I am?

The errors you are setting do not seem to be caused by corrupted NPM packages, to be honest I never encountered corrupted NPM packages being downloaded from public NPM registry. While not everyone get the NPM package from the same server, there are checks in place for that to ensure that the downloaded package is not corrupted.

[toddhd]

Thanks. I'm not sure what else to try then? Here is a link to a video I made of what I'm doing, and what I'm seeing, on my end. Maybe this will help?
https://www.youtube.com/watch?v=Ges2910U_gs

[alan-agius4]

PS C:\temp> ng new test
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE test/angular.json (2756 bytes)
CREATE test/package.json (1035 bytes)
CREATE test/README.md (1058 bytes)   
CREATE test/tsconfig.json (877 bytes)
CREATE test/.editorconfig (274 bytes)
CREATE test/.gitignore (548 bytes)
CREATE test/tsconfig.app.json (263 bytes)
CREATE test/tsconfig.spec.json (273 bytes)
CREATE test/.vscode/extensions.json (130 bytes)
CREATE test/.vscode/launch.json (470 bytes)
CREATE test/.vscode/tasks.json (938 bytes)
CREATE test/src/main.ts (250 bytes)
CREATE test/src/favicon.ico (15086 bytes)
CREATE test/src/index.html (290 bytes)
CREATE test/src/styles.scss (80 bytes)
CREATE test/src/app/app.component.html (20884 bytes)
CREATE test/src/app/app.component.spec.ts (910 bytes)
CREATE test/src/app/app.component.ts (363 bytes)
CREATE test/src/app/app.component.scss (0 bytes)
CREATE test/src/app/app.config.ts (227 bytes)
CREATE test/src/app/app.routes.ts (77 bytes)
CREATE test/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/extensions.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/launch.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .vscode/tasks.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.config.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.routes.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.scss.
The file will have its original line endings in your working directory
warning: adding embedded git repository: test
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint: 
hint:   git submodule add <url> test
hint: 
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint: 
hint:   git rm --cached test
hint: 
hint: See "git help submodule" for more information.
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
    Successfully initialized git.
PS C:\temp> cd .\test\
PS C:\temp\test> ng s 

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB |
main.js             | main          |  23.36 kB |
styles.css          | styles        |  96 bytes |

                    | Initial Total | 106.17 kB

Application bundle generation complete. [10.011 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

[toddhd]

Thanks, Also, to be fair, I also have a laptop setup for my dev work, so I just copied the files over there (from the original project) and it works just fine. I was also able to create a new project just fine on the laptop. So I guess it is something local to the PC. Do you happen to have any thoughts on where to even start looking?

[alan-agius4]

To be perfectly honest, I have no clue.

But when I see utterly strange behaviour, I would try by reinstalling node.js. I would recommend using NVM.

[toddhd]

Ok thank you. You can probably close this ticket in that case. If I discover anything pertinent, I'll still update the ticket. Just FYI, I have seen other tickets about this, so it's something weird. I just don't know what.
#26284

[toddhd]

https://colin.is/blog/2020/error-main-ts-is-missing-from-the-typescript-compilation/

FYI, still testing, but I think I found the solution (although I can't explain why it worked yesterday). Adding "preserveSymlinks" in the angular.json file seems to fix the issue.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "preserveSymlinks": true,