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

user_2045162 0
Viewed 8023

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.

angular
1 Answers

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>
user_10099220
Related