ng serve no longer works without AoT

[anhallbe]

Command

serve

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, might've worked in an earlier 17.0.x version

Description

When using "aot": false, there are two critical issues with ng serve.

1. .html files do not seem to be watched, so changes do not trigger a rebuild/refresh.
2. Saving .ts files trigger a rebuild, but the build always fail (see error below). NOTE: Does not happen on every save, but can be reproduced consistently.

The above means that ng serve has to be exited and re-run on every change, which makes it pretty much unusable.

Minimal Reproduction

1. ng new myproject
2. cd myproject
3. Add "aot": false to the angular.json builder options (projects.myproject.architect.build.options.aot)
4. ng serve
5. Make changes to and save app.component.html and app.component.ts

Exception or Error

Two issues:

1. Changes to `app.component.html` does not trigger rebuild. The only way for the changes to take effect is to quit and run `ng serve` again.


2. When saving `app.component.ts`, an error is shown:
⠋ Changes detected. Rebuilding...
✘ [ERROR] File 'src/app/app.component.ts' is missing from the TypeScript compilation. [plugin angular-compiler]

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

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

Your Environment

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

Angular CLI: 17.0.6
Node: 20.9.0
Package Manager: npm 10.2.3
OS: darwin arm64

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

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

Anything else relevant?

This happens both with the browser-eslint and the application builder.

Related: #26379

[anhallbe]

After more investigation:

The "File is missing from the Typescript compilation" issue appear to only happen when saving a .ts file that doesn't have any changes. This is an annoyance, but not as critical as the first issue (html files are not watched).

I also tested all versions of @angular-devkit/build-angular in the range 17.0.[0-6]. The .html issue can be reproduced in all of them.

I am no longer sure if this is a regression or if it has always been there with the "application"/"browser-esbuild" builder together with "aot": false. We only changed to the new builder with the 17 upgrade.

[alan-agius4]

Hi @anhallbe,

Thanks for reporting this issue and finding the root. I can confirm that the problem is indeed related to saving unmodified files.

Both reported issues should be solved with #26636 and #26640.

[anhallbe]

@alan-agius4 nice!

I tried the following, and it looks like the .html file issue is resolved:

npm i https://github.com/angular/angular-devkit-build-angular-builds#c0142b2a9a789b0716b6630c22f41cb7bbed793a --save-dev --force