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

AhsanAyaz · 2023-11-08T15:56:39Z

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

> [email protected] 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

The text was updated successfully, but these errors were encountered:

clydin · 2023-11-08T16:59:49Z

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 · 2023-11-12T23:16:41Z

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 · 2023-11-13T13:16:57Z

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 · 2023-11-16T15:08:49Z

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 · 2023-11-23T02:37:01Z

@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 · 2023-11-28T10:05:25Z

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 · 2023-11-30T13:01:20Z

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

jacekkoziol · 2023-11-30T13:39:01Z

I've solved the problem in my case by removing the option "aot": false, from angular.json

{
 ...
  "architect": {
      "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            // "aot": false, <- needs to be removed
            ...
      }
     ...

MasonVX · 2023-11-30T14:41:09Z

That helped, thanks.

clydin · 2023-11-30T14:47:23Z

If you are still encountering issues with the latest version, please provide the full output of ng version and if possible a minimal reproduction in a new issue. Also please ensure that all the Angular packages have been updated. The majority of the build system is in the @angular-devkit/build-angular package. The OS being used is also highly relevant (and the shell if on Windows) and will help the team troubleshoot more effectively.

zlatanov · 2023-11-30T17:06:23Z

I've just upgraded to v17 and "builder": "@angular-devkit/build-angular:application" and started getting this error when editing something.

I had "aot": false in dev build and just like @jacekkoziol suggested, removing it fixed the issue.

MasonVX · 2023-12-01T10:11:48Z

If you are still encountering issues with the latest version, please provide the full output of ng version and if possible a minimal reproduction in a new issue. Also please ensure that all the Angular packages have been updated. The majority of the build system is in the @angular-devkit/build-angular package. The OS being used is also highly relevant (and the shell if on Windows) and will help the team troubleshoot more effectively.

Hi,
I just did a simple test, I created a brand new app with "ng new". I testet it and everything was fine.

I changed "aot": to false and restarted the devserver.

Now the devserver showed the strange behavior:

When I save a ts file like: app.component.ts there is an compile error:

When I just put an extra empty line in it, or remove one the compile error is gone again. 2. The dev server das not recognize changes to html templates.

My system:
MacOS 14.1.1
NodeJS: v18.14.0

Here is the output of "ng version":

I hope it helps track down the error.

It might also have nothing to do with the original issue, it just manifest the same.

alan-agius4 · 2023-12-01T10:21:43Z

Hi @MasonVX, I am unable to replicate the problems with the steps provided using MacOS. Do you have any special characters in the path or some upper case characters?

MasonVX · 2023-12-01T11:17:46Z

Hi @MasonVX, I am unable to replicate the problems with the steps provided using MacOS. Do you have any special characters in the path or some upper case characters?

The path I created the app in:
~/Development/test/testApp

And as I said, the only thing I changed for the starter project is set aot to false:

Edit: terminal is zsh

MasonVX · 2023-12-01T11:24:00Z

Update: I also now tried a new starter project in ~/ called test. Same problem. I also tried bash instead of zsh, no change.

nodejs is installed via nvm

alan-agius4 · 2023-12-01T11:44:24Z

@MasonVX, I am still unable to replicate this when aot is disabled.

{
  "projects": {
    "ng-new-test": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/ng-new-test",
            "aot": false,

$ ng v

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

Angular CLI: 17.0.5
Node: 18.19.0
Package Manager: npm 10.2.3
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@schematics/angular             17.0.5
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

$ ng s

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     | 977.67 kB | 
main.js             | main          |  21.82 kB | 
styles.css          | styles        |  95 bytes | 

                    | Initial Total | 999.59 kB

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

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

Unchanged output files: 2
Application bundle generation complete. [0.070 seconds]
Page reload sent to client(s).

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

Unchanged output files: 2
Application bundle generation complete. [0.053 seconds]

MasonVX · 2023-12-01T14:06:19Z

Ok, I'm being honest, I have no idea what it could be. I even tried an update to npm v18.19.0 but it didn't help as well. I also deleted .angular and also node_modules.

I mean I'm not the only one. I could try to debug it myself, if you can give me a hint where to look, but I guess I would have to setup a whole Angular CLI dev environment.

Mehedihasan-95 · 2023-12-05T19:06:37Z

I've solved the problem in my case by removing the option "aot": false, from angular.json

{
 ...
  "architect": {
      "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            // "aot": false, <- needs to be removed
            ...
      }
     ...

i don't even have aot within my angular.json file , but still getting File 'src\app\app.component.ts' is missing from the TypeScript compilation. src/main.server.ts:2:29 Error after 6/7/8 saves.
-> Angular v17.0.0, node 20.9.0

TinyDinosaur · 2023-12-11T22:01:49Z

I don't understand whi is this closed why is this closed... The aot is not a solution. This is happening to me and its become more and more annoying. I'll paste my setup:

Angular CLI: 17.0.6
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.6
@angular-devkit/build-angular   17.0.6
@angular-devkit/core            17.0.6
@angular-devkit/schematics      17.0.6
@schematics/angular             17.0.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

AjChaudhary00 · 2023-12-18T08:12:23Z

@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

Symlinks and Project Structure:
It's possible that your project uses symbolic links (symlinks) for organizing files or directories, and the main.ts file might be part of a symlinked structure. When Angular CLI runs the TypeScript compiler, it follows the links and expects to find the TypeScript files in the specified locations.

preserveSymlinks: true:
By setting preserveSymlinks: true in the angular.json file, you instructed the Angular CLI to preserve the symbolic links during the build process. This means that when the TypeScript compiler looks for files, it respects the symbolic links and includes the files that are part of the symlinked structure.

TypeScript Compilation Process:
The TypeScript compiler (tsc) is responsible for compiling TypeScript code into JavaScript. When building an Angular project, the Angular CLI uses tsc under the hood. If the compilation process encounters symlinked files and doesn't preserve symlinks, it might miss files or encounter unexpected issues.

angular.json Configuration:
The angular.json file contains the configuration for your Angular project, including build settings. The preserveSymlinks: true option is part of this configuration and affects how the build process handles symbolic links.

angular-automatic-lock-bot · 2024-01-18T00:09:42Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

JoostK transferred this issue from angular/angular Nov 8, 2023

clydin added the needs: repro steps We cannot reproduce the issue with the information given label Nov 8, 2023

JeanMeche mentioned this issue Nov 11, 2023

File '...' is missing from the TypeScript compilation angular/angular#52815

Closed

clydin removed the needs: repro steps We cannot reproduce the issue with the information given label Nov 15, 2023

clydin linked a pull request Nov 15, 2023 that will close this issue

fix(@angular-devkit/build-angular): ensure compilation errors propagate to all bundle actions #26358

Merged

clydin closed this as completed in #26358 Nov 15, 2023

toddhd mentioned this issue Nov 16, 2023

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

Closed

1 task

BojanKogoj mentioned this issue Nov 16, 2023

bug(schematcis): Failed ng add. Main file not found angular/components#28178

Closed

1 task

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

AhsanAyaz commented Nov 8, 2023

clydin commented Nov 8, 2023 •

edited

Loading

rainerhahnekamp commented Nov 12, 2023

elgerm commented Nov 13, 2023 •

edited

Loading

toddhd commented Nov 16, 2023

Jose1Useche commented Nov 23, 2023

MasonVX commented Nov 28, 2023 •

edited

Loading

jacekkoziol commented Nov 30, 2023 •

edited

Loading

jacekkoziol commented Nov 30, 2023 •

edited

Loading

MasonVX commented Nov 30, 2023

clydin commented Nov 30, 2023

zlatanov commented Nov 30, 2023

MasonVX commented Dec 1, 2023 •

edited

Loading

alan-agius4 commented Dec 1, 2023

MasonVX commented Dec 1, 2023 •

edited

Loading

MasonVX commented Dec 1, 2023

alan-agius4 commented Dec 1, 2023

MasonVX commented Dec 1, 2023

Mehedihasan-95 commented Dec 5, 2023

TinyDinosaur commented Dec 11, 2023 •

edited

Loading

AjChaudhary00 commented Dec 18, 2023 •

edited

Loading

angular-automatic-lock-bot bot commented Jan 18, 2024

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

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

Comments

AhsanAyaz commented Nov 8, 2023

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

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

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

Anything else?

clydin commented Nov 8, 2023 • edited Loading

rainerhahnekamp commented Nov 12, 2023

elgerm commented Nov 13, 2023 • edited Loading

toddhd commented Nov 16, 2023

Jose1Useche commented Nov 23, 2023

MasonVX commented Nov 28, 2023 • edited Loading

jacekkoziol commented Nov 30, 2023 • edited Loading

jacekkoziol commented Nov 30, 2023 • edited Loading

MasonVX commented Nov 30, 2023

clydin commented Nov 30, 2023

zlatanov commented Nov 30, 2023

MasonVX commented Dec 1, 2023 • edited Loading

alan-agius4 commented Dec 1, 2023

MasonVX commented Dec 1, 2023 • edited Loading

MasonVX commented Dec 1, 2023

alan-agius4 commented Dec 1, 2023

MasonVX commented Dec 1, 2023

Mehedihasan-95 commented Dec 5, 2023

TinyDinosaur commented Dec 11, 2023 • edited Loading

AjChaudhary00 commented Dec 18, 2023 • edited Loading

angular-automatic-lock-bot bot commented Jan 18, 2024

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

clydin commented Nov 8, 2023 •

edited

Loading

elgerm commented Nov 13, 2023 •

edited

Loading

MasonVX commented Nov 28, 2023 •

edited

Loading

jacekkoziol commented Nov 30, 2023 •

edited

Loading

jacekkoziol commented Nov 30, 2023 •

edited

Loading

MasonVX commented Dec 1, 2023 •

edited

Loading

MasonVX commented Dec 1, 2023 •

edited

Loading

TinyDinosaur commented Dec 11, 2023 •

edited

Loading

AjChaudhary00 commented Dec 18, 2023 •

edited

Loading