Allow `.html` in URL in angular 18 like 'product/:slug.html' in when using @angular-devkit/build-angular:dev-server

[damienwebdev]

Command

serve

Description

I would like to be able to use the dev-server to render my routes configured like:

/product/pixel_8.html

When using the @angular-devkit/build-angular:dev-server just as I can when using the @angular-devkit/build-angular:application builder.

Describe the solution you'd like

I want to use my Angular application in my dev server in the exact same way as I do in my production express server. This discrepancy between my development environment and my production application is jarring, is backwards-incompatible with existing Angular behavior from 2-17, and is even against Vite's guidance about routing when doing SSR -- see: https://vitejs.dev/guide/ssr.html

// Use vite's connect instance as middleware. If you use your own
  // express router (express.Router()), you should use router.use
  // When the server restarts (for example after the user modifies
  // vite.config.js), `vite.middlewares` is still going to be the same
  // reference (with a new internal stack of Vite and plugin-injected
  // middlewares). The following is valid even after restarts.
  app.use(vite.middlewares)

  app.use('*', async (req, res) => {
    // serve index.html - we will tackle this next
  })

Describe alternatives you've considered

The solutions proposed by @alan-agius4 are not helpful. The first isn't a solution, it is just the problem restated. The second isn't a solution, it's a "do this other thing instead".

Make no changes, but be aware that refreshing the page will not work when using ng serve.
Remove .html extensions from URLs. To avoid affecting SEO, you can create a server rule that redirects .html URLs to the corresponding pages without extensions using a 301 redirect. This is the recommended long-term approach.

Additionally, the commentary here #27905 (comment) is widely applicable to "non-html" routes like .jpg, .gif, etc. Unfortunately, however, we're not talking about those, we're talking about .html, the type of document that Angular is returning.

This is expected, since the extensions matches a mime type, Including file extensions in routes is often due to legacy systems or a desire for clarity. However, this practice isn't ideal for SPAs as modern best practices favor clean, extensionless URLs. They enhance user experience, aid SEO, and ensure consistency across routes.

This is irrelevant fluff. "Modern best practices favor clean, extensionless URLs" is an arbitrary take on the web's current state ignoring the history of browsers as document renderers.

[angular-automatic-lock-bot]

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