Angular 2 router no base href set

Question

I am getting an error and can t find why  Here is the error   EXCEPTION  Error during instantiation of LocationStrategy   RouterOutlet - gt  Router - gt  Location - gt  LocationStrategy       angular2 dev js 23514 EXCEPTION  Error during instantiation of LocationStrategy   RouterOutlet - gt  Router - gt  Location - gt  LocationStrategy  BrowserDomAdapter logError   angular2 dev js 23514BrowserDomAdapter logGroup   angular2 dev js 23525ExceptionHandler call   angular2 dev js 1145 anonymous function    angular2 dev js 14801NgZone  notifyOnError   angular2 dev js 5796collection 1 StringMapWrapper merge onError   angular2 dev js 5700run   angular2-polyfills js 141 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise  internal  tryCatch   angular2-polyfills js 1511lib es6 promise  internal  invokeCallback   angular2-polyfills js 1523lib es6 promise  internal  publish   angular2-polyfills js 1494 anonymous function    angular2-polyfills js 243microtask   angular2 dev js 5751run   angular2-polyfills js 138 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise asap  flush   angular2-polyfills js 1305     angular2 dev js 23514 ORIGINAL EXCEPTION  No base href set  Please provide a value for the APP BASE HREF token or add a base element to the document BrowserDomAdapter logError   angular2 dev js 23514ExceptionHandler call   angular2 dev js 1154 anonymous function    angular2 dev js 14801NgZone  notifyOnError   angular2 dev js 5796collection 1 StringMapWrapper merge onError   angular2 dev js 5700run   angular2-polyfills js 141 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise  internal  tryCatch   angular2-polyfills js 1511lib es6 promise  internal  invokeCallback   angular2-polyfills js 1523lib es6 promise  internal  publish   angular2-polyfills js 1494 anonymous function    angular2-polyfills js 243microtask   angular2 dev js 5751run   angular2-polyfills js 138 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise asap  flush   angular2-polyfills js 1305     angular2 dev js 23514 ORIGINAL STACKTRACE BrowserDomAdapter logError   angular2 dev js 23514ExceptionHandler call   angular2 dev js 1157 anonymous function    angular2 dev js 14801NgZone  notifyOnError   angular2 dev js 5796collection 1 StringMapWrapper merge onError   angular2 dev js 5700run   angular2-polyfills js 141 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise  internal  tryCatch   angular2-polyfills js 1511lib es6 promise  internal  invokeCallback   angular2-polyfills js 1523lib es6 promise  internal  publish   angular2-polyfills js 1494 anonymous function    angular2-polyfills js 243microtask   angular2 dev js 5751run   angular2-polyfills js 138 anonymous function    angular2 dev js 5719zoneBoundFn   angular2-polyfills js 111lib es6 promise asap  flush   angular2-polyfills js 1305     angular2 dev js 23514 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 BaseException  angular2 dev js 8080          at new PathLocationStrategy  router dev js 1203          at angular2 dev js 1380         at Injector  instantiate  angular2 dev js 11923          at Injector  instantiateProvider  angular2 dev js 11859          at Injector  new  angular2 dev js 11849          at InjectorDynamicStrategy getObjByKeyId  angular2 dev js 11733          at Injector  getByKeyDefault  angular2 dev js 12048          at Injector  getByKey  angular2 dev js 12002          at Injector  getByDependency  angular2 dev js 11990    Does anyone know why the router is throwing this  I am using angular2 beta  here is my code     import  Component  from  angular2 core   import   RouteConfig  ROUTER DIRECTIVES   from  angular2 router   import  LoginComponent  from    pages login login component   import  DashboardComponent  from    pages dashboard dashboard component    Component       selector   app       directives  ROUTER DIRECTIVES       template            lt div class  wrapper  gt               lt router-outlet gt  lt  router-outlet gt           lt  div gt       RouteConfig         path      redirectTo    dashboard           path    login  name  login  component  LoginComponent          path    dashboard  name  dashboard  component  DashboardComponent      export class AppComponent

User · Answer

Check your index html  If you have accidentally removed the following part  include it and it will be fine    lt base href     gt    lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  icon  type  image x-icon  href  favicon ico  gt

User · Answer

Angular 7 8 fix is in app module ts   import  APP BASE HREF  from   angular common     inside  NgModule add  providers    provide  APP BASE HREF  useValue

User · Answer

it is just that add below code in the index html head tag      lt html gt       lt head gt        lt base href     gt              that worked like a charm for me

User · Answer

I had faced similar issue with Angular4 and Jasmine unit tests; below given solution worked for me

Add below import statement

import { APP_BASE_HREF } from '@angular/common';

Add below statement for TestBed configuration:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})

User · Answer

You can also use hash-based navigation by including the following in app.module.ts

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

and by adding the following to the @NgModule({ ... })

@NgModule({
  ...
  providers:    [
      ProductService, {
          provide: LocationStrategy, useClass: HashLocationStrategy
      }
  ],
  ...
})

“HashLocationStrategy—A hash sign (#) is added to the URL, and the URL segment after the hash uniquely identifies the route to be used as a web page fragment. This strategy works with all browsers, including the old ones.”

Excerpt From: Yakov Fain Anton Moiseev. “Angular 2 Development with TypeScript.”

User · Answer

Since 2 0 beta     import   APP BASE HREF   from  angular2 platform common

User · Answer

With angular 4 you can fix this issue by updating app.module.ts file as follows:

Add import statement at the top as below:

import {APP_BASE_HREF} from '@angular/common';

And add below line inside @NgModule

providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]

Reff: https://angular.io/api/common/APP_BASE_HREF

User · Answer

https   angular io docs ts latest guide router html     Add the base element just after the  lt head gt  tag  If the app folder is the application root  as it is for our application  set the href value exactly as shown here    The  lt base href     gt  tells the Angular router what is the static part of the URL  The router then only modifies the remaining part of the URL    lt head gt     lt base href     gt         lt  head gt    Alternatively add      Angular2 RC 6  import  APP BASE HREF  from   angular common     NgModule     declarations   AppComponent     imports   routing    or RouterModule         providers    provide  APP BASE HREF  useValue                 in your bootstrap   In older versions the imports had to be like   lt  Angular2 RC 6    import  APP BASE HREF  from   angular common   bootstrap AppComponent      ROUTER PROVIDERS      provide  APP BASE HREF  useValue                   lt  RC 0    import  provide  from  angular2 core   bootstrap AppComponent      ROUTER PROVIDERS     provide APP BASE HREF   useValue                   lt  beta 17    import  APP BASE HREF  from  angular2 router        beta 17  import  APP BASE HREF  from  angular2 platform common     See also Location and HashLocationStrategy stopped working in beta 16

[angular] Angular 2 router no base href set

The answer is

Examples related to angular

Examples related to routes

Examples related to href

Tags