serve fails complaining app/app.component.ts is missing from TypeScript compilation

[AhsanAyaz]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

Yes

Description

What I did so far:

• npm i -g @angular/cli@latest
• ng new ng-upskill-app
• Removed the HTML in app.component.html (left the router-outlet only)
• Added the control flow blocks a shown in the image.
• saw the errors

I can't reproduce this again 🙁

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

> ng-upskill-app@0.0.0 start
> ng serve


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

                    | Initial Total | 106.28 kB

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

Initial Chunk Files | Names | Raw Size
main.js             | main  | 23.50 kB | 

Unchanged output files: 2
Application bundle generation complete. [0.513 seconds]
Reloading client(s)...

Initial Chunk Files | Names | Raw Size
main.js             | main  |  2.14 kB | 

Unchanged output files: 2
Application bundle generation complete. [0.201 seconds]
Reloading client(s)...
✘ [ERROR] File 'src/app/app.component.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

    src/main.server.ts:2:29:
      2 │ import { AppComponent } from './app/app.component';
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.


Application bundle generation failed. [0.165 seconds]
✘ [ERROR] File 'src/app/app.component.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

    src/main.server.ts:2:29:
      2 │ import { AppComponent } from './app/app.component';
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

  Ensure the file is part of the TypeScript program via the 'files' or 'include' property.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.0
Node: 18.17.0
Package Manager: npm 9.6.7
OS: darwin arm64

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

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
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

[clydin]

Unfortunately, we are unable to reproduce the problem as described.
If possible can you provide a project with a minimal reproduction that demonstrates the problem?

[rainerhahnekamp]

In my project that error happens on a regular basis.

Here's the link: https://github.com/rainerhahnekamp/angular-local-change-detection.

Just make some syntax errors in the template, and the message will show up.

Two things that might be of interest:

• I use Tailwind
• WebStorm saves the file whenever I switch the window (and I do that quite often).

[elgerm]

Anyone that did not see this happening isn't programming with v17. It happens all the time.

At random, say, every 5-6 saves.

Edit: Downgraded from node 20.9.0 to node 18 and see no more errors.

[toddhd]

I don't know why this was closed, the problem still exists. 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 this error.

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?

[Jose1Useche]

@toddhd , I saw this in this link:

I finally found a solution, and did open a ticket with the Angular team about it. I honestly can't tell you why it ever worked, or why it works for most people and not others, however, I can tell you what fixed it. Another user on the Angular support forums tried this fix as well and confirmed it worked for them as well.

Go into the angular.json file, and add a "preserveSymlinks": true as indicated below:

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

    It works for me.
    
    Here's the link: https://stackoverflow.com/questions/77495707/angular-17-giving-me-a-main-ts-missing-error-and-i-cant-fix-it

[MasonVX]

I'm also having the same issue. "preserveSymlinks": true did not help for me. I had it a few times the last few days, but today I have it with each save of a file. When I update template files it does not recognize any change at all.

I just realized that when I save a ts file without changing anything the compiler complains. If I put an empty line into it, it fixes itself. But it's having every time.

I'm on the current version of everything angular: 17.0.4

[jacekkoziol]

I'm facing the same issue. After updating Angular to version 17.0.4 and changing the builder to @angular-devkit/build-angular:application everything went smoothly until suddenly it started to throw the error:

Changes detected. Rebuilding...✘ [ERROR] File ... is missing from the TypeScript compilation. [plugin angular-compiler]

"preserveSymlinks": true didn't solve the problem

For a few minutes after the update, it was working fine.
The application is building correctly with ng build.

I've just updated all the @angular packages to version 17.0.5 and the issue still exists :/