Enrutador angular 2 sin conjunto de href base

Me aparece un error y no puedo encontrar el motivo. Aquí está el error:

EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> LocationStrategy). angular2.dev.js:23514 EXCEPTION: Error during instantiation of LocationStrategy! (RouterOutlet -> Router -> Location -> 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) 

¿Alguien sabe por qué el enrutador está lanzando esto? Estoy usando angular2 beta

aquí está mi código:

 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:` 
` }) @RouteConfig([ { path: '/',redirectTo: '/dashboard' }, { path: '/login',name:'login',component: LoginComponent }, { path: '/dashboard',name:'dashboard',component: DashboardComponent,} ]) export class AppComponent { }

https://angular.io/docs/ts/latest/guide/router.html

Agregue el elemento base justo después de la etiqueta . Si la carpeta de la aplicación es la raíz de la aplicación, como lo es para nuestra aplicación, establezca el valor href exactamente como se muestra aquí.

La le dice al enrutador angular cuál es la parte estática de la URL. El enrutador solo modifica la parte restante de la URL.

   ...  

Alternativamente agregar

> = Angular2 RC.6

 import {APP_BASE_HREF} from '@angular/common'; @NgModule({ declarations: [AppComponent], imports: [routing /* or RouterModule */], providers: [{provide: APP_BASE_HREF, useValue : '/' }] ]); 

en tu bootstrap

En versiones anteriores, las importaciones tenían que ser como

 import {APP_BASE_HREF} from '@angular/common'; bootstrap(AppComponent, [ ROUTER_PROVIDERS, {provide: APP_BASE_HREF, useValue : '/' }); ]); 

 import {provide} from 'angular2/core'; bootstrap(AppComponent, [ ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/' }); ]); 

 import {APP_BASE_HREF} from 'angular2/router'; 

> = beta.17

 import {APP_BASE_HREF} from 'angular2/platform/common'; 

Ver también Location y HashLocationStrategy dejaron de funcionar en beta.16

Me enfrenté a un problema similar con las pruebas unitarias de Angular4 y Jasmine; a continuación la solución dada funcionó para mí

Agregar statement de importación a continuación

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

Agregue la siguiente statement para la configuración TestBed:

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

Desde 2.0 beta 🙂

 import { APP_BASE_HREF } from 'angular2/platform/common'; 

También puede usar navegación basada en hash incluyendo lo siguiente en app.module.ts

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

y agregando lo siguiente al @NgModule ({…})

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

Desarrollo angular 2 con TypeScript

“HashLocationStrategy: se agrega un signo hash (#) a la URL, y el segmento URL después del hash identifica de manera única la ruta que se utilizará como fragmento de página web. Esta estrategia funciona con todos los navegadores, incluidos los antiguos “.

Extracto De: Yakov Fain Anton Moiseev. “Desarrollo angular 2 con TypeScript”.

Con angular 4 puede solucionar este problema actualizando el archivo app.module.ts de la siguiente manera:

Agregue la statement de importación en la parte superior como se muestra a continuación:

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

Y agrega debajo de la línea dentro de @NgModule

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

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

es solo eso, agrega el código a continuación en la etiqueta principal index.html

     ... 

eso funcionó como un encanto para mí.