Angular dev server treats route as static asset

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

Continue reading...