I am using Angular 19 and trying to create routes that look like this https://localhost:4200/pics/pc-arch/mnt/drive and https://localhost:4200/pics/pc-arch/mnt/drive/gallery1.jpg.

I have the following in my app.routes.ts

function galleryPicsMatcher(segments: UrlSegment[]) {
    if (segments.length >= 2 && segments[0].path === 'pics') {
        const result: UrlMatchResult = { consumed: segments, posParams: { host: segments[1] } };
        const lastSegment: UrlSegment = segments[segments.length - 1];
        const picNamePresent = isImagePath(lastSegment.path);
        if (picNamePresent) {
            result.posParams!['picName'] = lastSegment;
        }
        result.posParams!['galleryPath'] = new UrlSegment(`/${segments.slice(2, picNamePresent ? segments.length - 1: undefined).join('/')}`, {});
        return result;
    }
    return null;
}

export const routes: Routes = [
    { component: MgmtComponent, path: 'mgmt', },
    { component: GalleryPicsComponent, matcher: galleryPicsMatcher },
];

The first route works, but as soon as I add an extension like .jpg or .png, I get a 404 where the app doesn't even load. Is there some way I can configure the dev server to ignore routes that start with pics and not treat them as assets? Only .html extension works.

I am using Angular 19 and trying to create routes that look like this https://localhost:4200/pics/pc-arch/mnt/drive and https://localhost:4200/pics/pc-arch/mnt/drive/gallery1.jpg.

I have the following in my app.routes.ts

function galleryPicsMatcher(segments: UrlSegment[]) {
    if (segments.length >= 2 && segments[0].path === 'pics') {
        const result: UrlMatchResult = { consumed: segments, posParams: { host: segments[1] } };
        const lastSegment: UrlSegment = segments[segments.length - 1];
        const picNamePresent = isImagePath(lastSegment.path);
        if (picNamePresent) {
            result.posParams!['picName'] = lastSegment;
        }
        result.posParams!['galleryPath'] = new UrlSegment(`/${segments.slice(2, picNamePresent ? segments.length - 1: undefined).join('/')}`, {});
        return result;
    }
    return null;
}

export const routes: Routes = [
    { component: MgmtComponent, path: 'mgmt', },
    { component: GalleryPicsComponent, matcher: galleryPicsMatcher },
];

The first route works, but as soon as I add an extension like .jpg or .png, I get a 404 where the app doesn't even load. Is there some way I can configure the dev server to ignore routes that start with pics and not treat them as assets? Only .html extension works.

• angular
• angular-router

1 Answer 1

This is the expected behavior, it's not recommended to have extensions in the paths.

More details on the CLI repo.

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:

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.

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

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

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.

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.

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.

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.