routing - pathmatch - Enrutador angular 2 sin base href establecido

router navigate params

Question

Recibo un error y no puedo encontrar por qué. 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:`
        <div class="wrapper">
            <router-outlet></router-outlet>
        </div>`
})
@RouteConfig([
    { path: ''/'',redirectTo: ''/dashboard'' },
    { path: ''/login'',name:''login'',component: LoginComponent },
    { path: ''/dashboard'',name:''dashboard'',component: DashboardComponent,}
])
export class AppComponent {
}

Answer 1

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

Agregue la declaración de importación en la parte superior de la siguiente manera:

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

Y agregue la línea debajo de @NgModule

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

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

Answer 2

Desde 2.0 beta :)

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

Answer 3

Me había enfrentado a un problema similar con las pruebas unitarias Angular4 y Jasmine; debajo de la solución dada funcionó para mí

Agregar a continuación la declaración de importación

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

Agregue la siguiente declaración para la configuración de TestBed:

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

Answer 4

Revisa tu index.html. Si ha eliminado accidentalmente la siguiente parte, inclúyala y estará bien

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

Answer 5

También puede usar la 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
      }
  ],
  ...
})

“HashLocationStrategy: se agrega un signo de hash (#) a la URL, y el segmento de URL después del hash identifica de forma exclusiva la ruta que se utilizará como un 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".

Answer 6

es solo que agregue el código a continuación en la etiqueta de encabezado index.html

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

eso funcionó como un encanto para mí.

Answer 7

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

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

El <base href="/"> 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.

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

Alternativamente agregue

> = 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

<Angular2 RC.6

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

<RC.0

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

<beta.17

import {APP_BASE_HREF} from ''angular2/router'';

> = beta.17

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

Consulte también Ubicación y HashLocationStrategy dejó de funcionar en beta.16