Enrutador angular 2 sin base href establecido

195

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 {
}
routing  angular 
— Jason Spick
fuente

Respuestas:

376

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

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

El <base href="https://stackoverflow.com/">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

— Günter Zöchbauer
fuente
3
Pequeño ejemplo de segunda forma:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k
1
Tuve que agregar la línea de importación import {provide} from 'angular2/core';para poder usar provide.
— CorayThan
2
Tuve que importar líneaimport {APP_BASE_HREF} from 'angular2/router';
— jimmystormig
Gracias por las actualizaciones. Yo no uso TS (solo Dart) y mi conocimiento de TS todavía es limitado.
— Günter Zöchbauer
1
Mi proyecto tiene elementos SVG llenos de patrones de imagen. Las imágenes no se muestran en Firefox cuando <base href="https://stackoverflow.com/" />se estableció en el archivo (por "/", "./", "#"o cualquier otra ruta de la base, no importa cómo las rutas de las imágenes mismas se especifican en el patrón). La única solución que finalmente funcionó fue usar APP_BASE_HREFen su lugar. Un verdadero salvavidas!
— ConnorsFan
34

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 : '/' }
    ]
})
— Dilip Nannaware
fuente
11

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
      }
  ],
  ...
})

Desarrollo angular 2 con TypeScript

“HashLocationStrategy: se agrega un signo hash (#) a la URL, y el segmento 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".

— Lionel Morrison
fuente
Gracias Lionel! Esto es excelente y resolvió un problema que tuve al usar la solución APP_BASE_HREF anterior que falla al usar parámetros de URL como "product /: id". ¡Gracias!
— Stokely
6

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

   <html>
    <head>
     <base href="https://stackoverflow.com/">
      ...

eso funcionó como un encanto para mí.

— naram kiran
fuente
5

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 debajo de la línea dentro @NgModule

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

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

— Suresh Kamrushi
fuente
¿Por qué useValue necesita ser '/ my / app'?
— Dilip Nannaware
5

La solución angular 7,8 está en app.module.ts 

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

dentro de @NgModule add

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

— Feng Zhang
fuente
Enfrenté este error al intentar cargar un componente para el libro de historia angular. Este componente tenía dependencia del enrutador. Se solucionó el error !!
— Arpan Banerjee
1

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

<base href="https://stackoverflow.com/">

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
— Tadele Ayelegn
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.