Angular2 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

This is a very common error for Angular2 beginners, if you are reading this it’s probably because you’re using the RouterModule module for the first time, you’ve done everything right but when you run your application you see something like this on your firebug:

core.umd.js:3462 EXCEPTION: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.ErrorHandler.handleError @ core.umd.js:3462(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
core.umd.js:3468 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (common.umd.js:669)
    at provideLocationStrategy (router.umd.js:3602)
    at NgModuleInjector.get (AppModule.ngfactory.js:125)
    at NgModuleInjector.get (AppModule.ngfactory.js:130)
    at NgModuleInjector.get (AppModule.ngfactory.js:167)
    at NgModuleInjector.get (AppModule.ngfactory.js:177)
    at NgModuleInjector.AppModuleInjector.getInternal (AppModule.ngfactory.js:235)
    at NgModuleInjector.get (core.umd.js:7221)
    at ApplicationRef_._loadComponent (core.umd.js:7070)
    at ApplicationRef_.bootstrap (core.umd.js:7058)ErrorHandler.handleError @ core.umd.js:3468(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:192onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357ZoneTask.invoke @ zone.js:297
zone.js:344 Unhandled Promise rejection: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document. ; Zone: <root> ; Task: Promise.then ; Value: Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.() Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.
    at new PathLocationStrategy (http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js:669:23)
    at provideLocationStrategy (http://localhost:3000/node_modules/@angular/router/bundles/router.umd.js:3602:13)
    at NgModuleInjector.get (AppModule.ngfactory.js:125:77)
    at NgModuleInjector.get (AppModule.ngfactory.js:130:84)
    at NgModuleInjector.get (AppModule.ngfactory.js:167:151)
    at NgModuleInjector.get (AppModule.ngfactory.js:177:132)
    at NgModuleInjector.AppModuleInjector.getInternal (AppModule.ngfactory.js:235:66)
    at NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7221:31)
    at ApplicationRef_._loadComponent (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7070:44)
    at ApplicationRef_.bootstrap (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7058:18)
zone.js:346 Error: Uncaught (in promise): Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.()

Lucky for you this problem is very easy to solve, you just have to go to your index.html and add the following line on the head:

<head>
  <base href="/">
  ...
</head>

There, problem solved!!

Recommended for you

Angular2 Tutorial: Creating Attribute Directives According to Angular2 documentation, directives are classes that can change the component behavior or/and appearance, which basically means they can add CSS classes and styles, register events and manipulate the component's properties. In this tutorial I'm going to show you how to create a very ...
Angular2 Tutorial: Creating Custom Pipes Angular 2 Pipes provide us a very simple way to transform/format the data displayed by our application, there are some built-in pipes we can use, but sometimes they don't meet our needs, that's when we have to create custom pipes. This will be a very quick tutorial in which I'll give you an example ...
Interacting with Child Components in Angular2 There are lots of situations where we have to divide a component into several sub-components, resulting in a parent with N child components that somehow have to interact with the parent, like for example a menu component like this: In this case the menu-componen...
Passing Parameters to an Angular2 Component One of the greatest advantages of using components is reusability, which means once you've create your component you can use it in several places across your project without having to recreate it everytime. But for that to be possible we have to be able to pass parameters to our components, that's w...

4 comments on “Angular2 Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.

  1. Ayz Pat

    Invalid route configuration of route ‘/': path cannot start with a slash

    This is the error i get while using href=”/”

  2. Joey

    Not just put it in the head section, but it needs to be the first tag in the head section. Mine was 4th and was throwing that error until I moved it 1st.

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>