angular-cli: serve fails complaining app/app.component.ts is missing from TypeScript compilation

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
image

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

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 1
  • Comments: 21 (2 by maintainers)

Most upvoted comments

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

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.

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
            ...
      }
     ...