Angular HMR (Hot Module Replacement) causes TypeError - Failed to construct 'URL': Invalid URL

I can't see any one else posting about this.

I just upgraded my angular 18 app to angular 19 and started getting a plethora of these errors:

TypeError: Failed to construct 'URL': Invalid URL
at footer.component.ts:11:29


It took me a while to figure out that if I bypass HMR, I can avoid these errors.

(FYI, I just run ng serve --no-hmr)

I would like to know if there is a real fix for this rather than turning off HMR, which seems like a nice development feature.

FYI here are my relevant files: (if more is needed, let me know).

/package.json

....
"dependencies": {
"@angular/animations": "^19.2.6",
"@angular/cdk": "^19.2.9",
"@angular/common": "^19.2.6",
"@angular/compiler": "^19.2.6",
"@angular/core": "^19.2.6",
"@angular/forms": "^19.2.6",
"@angular/material": "^19.2.9",
"@angular/platform-browser": "^19.2.6",
"@angular/platform-browser-dynamic": "^19.2.6",
"@angular/router": "^19.2.6",
"chart.js": "^4.4.8",
"genversion": "^3.2.0",
"rxjs": "~7.8.0",
"stacktrace-js": "^2.0.2",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},


// tsconfig.json

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": ["ES2022", "dom"],
"baseUrl": "./",
"paths": {
"@src/*": ["src/*"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}


//app.config:

import { ApplicationConfig, inject, provideZoneChangeDetection } from '@angular/core';
import {
createUrlTreeFromSnapshot,
PreloadAllModules,
provideRouter,
Router,
withComponentInputBinding,
withInMemoryScrolling,
withPreloading,
withRouterConfig,
withViewTransitions,
} from '@angular/router';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(
routes,
withInMemoryScrolling(),
withViewTransitions({
onViewTransitionCreated: ({ transition, to }) => {
const router = inject(Router);
const toTree = createUrlTreeFromSnapshot(to, []);
// Skip the transition if the only thing changing is the fragment and queryParams
if (
router.isActive(toTree, {
paths: 'exact',
matrixParams: 'exact',
fragment: 'ignored',
queryParams: 'ignored',
})
) {
transition.skipTransition();
}
},
}),
withComponentInputBinding(),
withRouterConfig({ paramsInheritanceStrategy: 'always', onSameUrlNavigation: 'reload' }),
withPreloading(PreloadAllModules),
),
provideAnimations(),
provideHttpClient(withInterceptorsFromDi()),
],
};


/footer.component.ts

import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { RouterLink, RouterModule } from '@angular/router';

@Component({
selector: 'app-footer',
imports: [CommonModule, RouterModule, RouterLink],
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent {}


/footer.component.html

<footer class="app-footer">
<div class="footer-column">
<img src="./assets/Text.png" alt="" class="footer-logo-text" />
<p>....</p>
</div>
<div class="footer-column">
<h3>Links</h3>
<a routerLink="/terms">Terms of Service</a>
<a routerLink="/privacy">Privacy Policy</a>
</div>
<div class="footer-column">
<h3>Contact</h3>
<p>© 2025 ...</p>
</div>
</footer>

Continue reading...