“Error: No base href set.” after upgrade to Angular 8

Question

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.

It may not have any effect on the error message, but you should add a body to the HTML file, and put the app-root component in it. — ConnorsFan
@ConnorsFan That was actually the problem, that file was generated (as far as I know) by the Angular 4 CLI and has never been touched since, so I totally overlooked that. If you want to put that in as an answer I will gladly accept it. — CodingGorilla

ConnorsFan ConnorsFan · Accepted Answer · 2019-06-18T19:41:24

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>

“Error: No base href set.” after upgrade to Angular 8

1 Answers