Post
Ask Question

Angular 2 - Resolving "No base href set" Error

In this blog, you will learn how to resolve this error “No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.” in Angular 2.


Sometimes, when we work on Angular 2, we miss some minor things because we don’t notice.

You have to do the following things to resolve this issue.

Solution

Add the base element just after the <head> tag. If the app folder is the application root as it is for our application, set the href value exactly as shown here.

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.

 

  1. <head>  
  2.   
  3. <base href="/">  
  4.   
  5. ...  
  6.   
  7. </head>  

 

>= Angular2 RC.6

 

  1. import {APP_BASE_HREF} from '@angular/common';  
  2.   
  3. @NgModule({  
  4.   
  5. declarations: [AppComponent],  
  6.   
  7. imports: [routing /* or RouterModule */],  
  8.   
  9. providers: [{provide: APP_BASE_HREF, useValue : '/' }]  
  10.   
  11. ]);  

 

I hope this helps.
Next Recommended Reading Angular Error Handling When Installing Angular Material Latest Version