Menu
After completing an update from Angular 5.x to 8.0.1, my application compiles but I get the following error at runtime (using ng serve):
Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
I've looked at other posts such as: Angular 2 router no base href set, however, my app already has the HTML base element in it. My index.html is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<app-root></app-root>
</html>
I can solve the problem by adding:
{
provide: APP_BASE_HREF,
useValue: '/'
}
to my app.modules.ts, but I'm more interested in understanding why this is now needed, when a bare bones app created with ng new works without this provider.
584
The <base href="/"> tells the Angular router what is the static part of the URL. The router then only modifies the remaining part of the URL. Without the base href tag you will see errors like this: Angular 2 Router no Base href set.
The href attribute specifies the base URL for all relative URLs on a page.
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root>
Make sure that index.html is a valid HTML file by adding the body element, in which you can insert the Angular root component:
<html lang="en">
<head>
<base href="/">
...
</head>
<body>
<app-root></app-root>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
