application-builder: Error when route ends with filename

[laurenzfiala]

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

Using webpack (browser builder)

Description

If a route in the Angular app has a path parameter at the end of the route and the parameter ends with a known file-ending (e.g. json, pdf, jpg, png, etc.), vite throws an error saying "Cannot GET (route)".

Example

Assume this routing config:

{
    path: 'test/:id',
    component: TestComponent
}

http://localhost:4200/test/myfile.jpg -> errors http://localhost:4200/test/myfile.pdf -> errors http://localhost:4200/test/myfile.jpga -> works, parameter is handed to component and component is properly rendered http://localhost:4200/test/myfile -> works too

Minimal Reproduction

https://github.com/laurenzfiala/ng-app-builder-repro

How to test:

1. serve the app
2. open http://localhost:4200/test/mycustomid -> this works as expected
3. open http://localhost:4200/test/mycustomid.jpg -> the page shows "Cannot GET /test/mycustomid.jpg"

To me this is very unexpected, especially since it worked before migrating to vite. I would expect the parameter to have the value "mycustomid.jpg" and the component to be rendered properly.

Exception or Error

No response

Your Environment

Angular CLI: 18.0.5
Node: 20.13.1
Package Manager: npm 10.8.1
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.5
@angular-devkit/build-angular   18.0.5
@angular-devkit/core            18.0.5
@angular-devkit/schematics      18.0.5
@angular/cli                    18.0.5
@schematics/angular             18.0.5
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

No response

[alan-agius4]

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.

What is the reason for you to have extensions as static file in your Angular app?

[laurenzfiala]

@alan-agius4 Thanks for the reply! I have a static site and use the filename to find the currently viewed image in an array of predefined images (to show an image gallery).

Unfortunately, I don't fully understand your reasoning. As far as I know, all files are located in the assets folder defined in angular.json. To me it would make much more sense if everything in that assets folder is statically served and all other routes are handled by Angular.

[alan-agius4]

In this scenario, the URL appears to reference a file with a valid file extension, causing the dev-server to throw a 404 error since the file does not exist on disk. The dev-server handles static file routing, not the Angular router.

Serving HTML content with file extensions like .png, .jpg, or .pdf in a Single Page Application (SPA) is generally considered bad practice for several reasons:

1. Browser Expectations: Web browsers use file extensions to determine content types. Serving HTML content with an image or document extension can mislead the browser, causing it to misinterpret the HTML, resulting in errors or incorrect rendering.

2. Security Risks: Misrepresenting content types can create security vulnerabilities, such as cross-site scripting (XSS) attacks.

3. Search Engine Crawlers: Search engines use content types for indexing and ranking pages. Incorrect extensions can prevent proper indexing, reducing visibility in search results.

4. Assistive Technologies: Screen readers and other assistive technologies rely on content types to interpret web pages. Misleading extensions can hinder these technologies from providing accurate information to users with disabilities.

5. Caching Issues: Caching mechanisms, both server-side and browser-side, depend on file extensions to manage caching. Incorrect extensions can cause caching problems, leading to outdated or incorrect content being served.

6. Bandwidth Waste: Browsers might download and process HTML content as if it were an image or PDF, wasting bandwidth and slowing down page load times.

7. User Confusion: Users expect certain behaviors from specific file types. Serving HTML content with image or document extensions can confuse and frustrate users who may not be able to interact with the content as expected.

In summary, serving HTML content with non-HTML file extensions leads to technical, security, and usability issues. It is always best to serve HTML content with the correct .html extension and use appropriate MIME types for a smooth and secure user experience.

[laurenzfiala]

Thanks again for the detailed response!

It seems I need to read up more on this topic, to me the URL is more a semantic representation of the current view, and the Content-Type header is the technical description of it. Thanks for the input! :)

[angular-automatic-lock-bot[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.}