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: Uncaught (in promise): Error: Cannot match any routes: ” If you're specifying the routes on your project for the first time you may see the following error on the console when you run it: core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @...
Angular2 Error: Cannot assign to a reference or variable! ; Zone: ; Task: Promise.then ... This error occurs when you try to define a template reference variable with the same name of an existing variable, like for example in this case: @Component({ selector: 'example', template: ` Name ` }) export class AppComponent { name; } As you can see, the...
Login Screen and Authentication with Angular2 Angular2 Login Screen Before we start I just want to say that in order to easily understand this tutorial you should already have some basic knowledge about Angular 2, it will involve routing, dependency injection and working with multiple components. I don't want to make this tutorial too long,...
Angular2 Tutorial: Developing a Realtime Chat App Angular 2 Chat Application Hi guys, today we're going to make an awesome chat application with Angular2, NodeJS and Socket.io, this tutorial will involve quite a lot of things, and there are also lots of small details, so it will be a little bit longer than usual. To easily understand and make t...

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>