Routeur angulaire 2 sans jeu de référence href

195

Je reçois une erreur et je ne trouve pas 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 ceci? 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 {
}
routing  angular 
— Jason Spick
source

Réponses:

376

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

Ajoutez l'élément de base juste après la <head>balise. Si le appdossier est la racine de l'application, comme c'est le cas pour notre application, définissez la hrefvaleur exactement comme indiqué ici.

Le <base href="https://stackoverflow.com/">indique au routeur angulaire quelle est la partie statique de l'URL. Le routeur ne modifie alors que la partie restante de l'URL.

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

Vous pouvez également 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 anciennes versions, 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 : '/' });
]);

<beta.17

import {APP_BASE_HREF} from 'angular2/router';

> = beta.17

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

Voir aussi Location et HashLocationStrategy ont cessé de fonctionner en version beta.16

— Günter Zöchbauer
source
3
Petit exemple de deuxième voie:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k
1
J'ai dû ajouter la ligne d'importation import {provide} from 'angular2/core';pour pouvoir utiliser l'offre.
— CorayThan
2
J'ai dû importer une ligneimport {APP_BASE_HREF} from 'angular2/router';
— jimmystormig
Merci pour les mises à jour. Je n'utilise pas TS moi-même (seulement Dart) et mes connaissances TS sont encore limitées.
— Günter Zöchbauer
1
Mon projet comporte des éléments SVG remplis de motifs d'image. Les images ont jamais été affichées dans Firefox quand <base href="https://stackoverflow.com/" />a été défini dans le fichier (pour "/", "./", "#"ou tout autre chemin de base, peu importe la façon dont les chemins d'image eux - mêmes ont été spécifiés dans le modèle). La seule solution qui a finalement fonctionné était d'utiliser à la APP_BASE_HREFplace. Un vrai épargnant de vie!
— ConnorsFan
34

J'avais rencontré un problème similaire avec les tests unitaires Angular4 et Jasmine; la solution donnée ci-dessous a fonctionné pour moi

Ajouter la déclaration d'importation ci-dessous

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

Ajoutez ci-dessous l'instruction pour la configuration TestBed:

TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
— Dilip Nannaware
source
11

Vous pouvez également utiliser la navigation basée sur le hachage en incluant les éléments suivants 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
      }
  ],
  ...
})

Développement Angular 2 avec TypeScript

«HashLocationStrategy: un signe de hachage (#) est ajouté à l'URL et le segment d'URL après le hachage identifie de manière unique l'itinéraire à utiliser comme fragment de page Web. Cette stratégie fonctionne avec tous les navigateurs, y compris les anciens. »

Extrait de: Yakov Fain Anton Moiseev. "Développement Angular 2 avec TypeScript."

— Lionel Morrison
source
Merci Lionel! Ceci est excellent et a résolu un problème que j'ai eu en utilisant la solution APP_BASE_HREF ci-dessus qui échoue lors de l'utilisation de paramètres d'URL comme "product /: id". Merci!
— Stokely
8

Depuis 2.0 beta :)

import { APP_BASE_HREF } from 'angular2/platform/common';
— hache d'incendie
source
Depuis Rc6, tout est maintenant dans le fournisseur: angular.io/docs/ts/latest/api/common/index/…
— Mark Kenny
1
Cela m'a aidé lorsque mes spécifications dans Karma échouaient avec Erreur: Aucun ensemble de références href de base. Veuillez fournir une valeur pour le jeton APP_BASE_HREF ou ajouter un élément de base au document.
— Aligné
6

c'est juste ajouter le code ci-dessous dans la balise head index.html

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

cela a fonctionné comme un charme pour moi.

— naram kiran
source
5

Avec angular 4, vous pouvez résoudre ce problème en mettant à jour le fichier app.module.ts comme suit:

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

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

Et ajoutez la ligne ci-dessous à l'intérieur @NgModule

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

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

— Suresh Kamrushi
source
Pourquoi useValue doit-il être '/ my / app'?
— Dilip Nannaware
5

Angular 7,8 fix est dans app.module.ts 

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

dans @NgModule add

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

— Feng Zhang
source
J'ai rencontré cette erreur en essayant de charger un composant pour un livre d'histoire angulaire. Ce composant avait une dépendance de routeur. Cela a résolu l'erreur !!
— Arpan Banerjee
1

Vérifiez votre index.html. Si vous avez accidentellement supprimé la partie suivante, incluez-la et tout ira 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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.