dev-server "recovers" from error loading wrong index.html

[vokeit-gschuster]

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

Don't known / other

Is this a regression?

No

Description

In a new project setup with "ng new my-project" the dev-server renders the given index.html from src/index.html
If then there's an error in the compilation, e.g. a provoked one in app.ts:

  constructor() {
        this.doesnotexist.bar();
  }

it shows the error, when it's fixed it returns to normal.

The "bug" occurs if there's also a public/index.html in place.
As long as there's no error it never gets loaded.
But as soon as there has been an error once the compiler "forgets" it should render src/index.html as starting point and then renders public/index.html until the whole dev-server gets restarted.
This even occurs when given the "architect > build > options > index" option, it is silently ignored as soon as there has been one error in the dev-server session.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

In my case a totally blank page as there was a blank public/index.html left-over from previous tests.

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

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 21.0.3            │ ^21.0.2           │
│ @angular/cli              │ 21.0.3            │ ^21.0.2           │
│ @angular/common           │ 21.0.5            │ ^21.0.0           │
│ @angular/compiler         │ 21.0.5            │ ^21.0.0           │
│ @angular/compiler-cli     │ 21.0.5            │ ^21.0.0           │
│ @angular/core             │ 21.0.5            │ ^21.0.0           │
│ @angular/forms            │ 21.0.5            │ ^21.0.0           │
│ @angular/platform-browser │ 21.0.5            │ ^21.0.0           │
│ @angular/router           │ 21.0.5            │ ^21.0.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 5.9.3             │ ~5.9.2            │
│ vitest                    │ 4.0.16            │ ^4.0.8            │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

[alan-agius4]

The issue is due to a conflict between two index.html files. Vite is correctly treating public/index.html as a static asset and does not apply the HMR code to it, but there is a second instance at src/index.html. What is the intended purpose of the version in the public folder?

[vokeit-gschuster]

It was there by accident.
Question is: why does it switch to public/index.html when it rendered src/index.html in the first place?

Steps to reproduce:
ng new my-project
create public/index.html with any text
npm run start
change src/app/app.ts to produce a compilation error
fix src/app/app.ts

Now it renders public/index.html instead if src/index.html

[alan-agius4]

Because the build failed, Angular couldn't generate the index.html, so when the Angular middleware couldn't locate the index.html, the request 'fell through' to the static file middleware. Since Vite serves files from the assets folder as raw static content, it doesn't inject the HMR scripts required for live reloading, and this will be cached until the dev-server is restarted.

Closing as this is caused due to conflicting source files.