Angulaire 2 routeur sans base href ensemble

j'obtiens une erreur et ne peut pas trouver pourquoi. Voici l'erreur: 

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)

est-ce que quelqu'un sait pourquoi le routeur lance ça? J'utilise angular2 beta

voici mon 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:`
        <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 {
}
143
demandé sur Günter Zöchbauer 2015-12-30 21:34:37

6 réponses

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

ajouter l'élément de base juste après l'étiquette <head> . Si le dossier app est la racine de l'application, comme c'est le cas pour notre application, définissez la valeur href 1519160920" exactement comme indiqué ici.

le <base href="/"> indique au routeur angulaire Quelle est la partie statique de l'URL. Le routeur alors modifie seulement la partie restante de l'URL. 

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

ajouter

> = Angular2 RC.6 

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

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

dans votre bootstrap.

dans les versions plus anciennes les importations devaient être comme

< 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 : '/' });
]);

< bêta.17 

import {APP_BASE_HREF} from 'angular2/router';

> = bêta.17 

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

Voir aussi Emplacement et HashLocationStrategy cessé de fonctionner en version bêta.16

273
répondu Günter Zöchbauer 2017-05-23 11:54:57

j'avais fait face à un problème similaire avec Angular4 et Jasmine tests unitaires; ci-dessous une solution donnée travaillé pour moi

Ajouter sous déclaration d'importation 

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

ajouter l'énoncé suivant pour la configuration de la plate-forme D'essai: 

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
28
répondu Dilip Nannaware 2017-09-20 17:49:13

Depuis la version 2.0 beta :) 

import { APP_BASE_HREF } from 'angular2/platform/common';
8
répondu fireaxe 2016-05-12 13:58:50

vous pouvez également utiliser la navigation basée sur le hachage en incluant ce qui suit dans app.module.ts 

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

et en ajoutant ce qui suit au @NgModule({ ... }) 

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

Angular 2 Development with TypeScript

"HashLocationStrategy-Un signe dièse (#) est ajouté à l'URL et l'URL segment après le hachage identifie de manière unique la route pour être utilisé comme une page web fragment. Cette stratégie fonctionne avec tous les navigateurs, y compris les anciens."

Extrait De: Yakov Fain Anton Moiseev. "Angulaire 2 Développement avec des caractères d'imprimerie."

7
répondu Lionel Morrison 2017-02-21 01:10:35

avec angular 4 Vous pouvez corriger ce problème en mettant à jour app.module.ts fichier comme suit:

ajouter déclaration d'importation en haut comme ci-dessous: 

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

et ajouter au-dessous de la ligne @NgModule 

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

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

3
répondu Suresh Kamrushi 2018-02-28 12:21:39

il est juste que Ajouter ci-dessous code dans l'index.html de la balise head 

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

qui a fonctionné comme un charme pour moi.

1
répondu naram kiran 2018-03-12 03:20:10