Angulaire 2 routeur sans base href ensemble

J'obtiens une erreur et ne peut pas trouver pourquoi. Voici le message d'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)

Personne ne sait pourquoi le routeur est en train de lancer ce? Je suis à l'aide de angular2 bêta

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 {
}

InformationsquelleAutor Jason Spick | 2015-12-30

angular routing

320

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

Ajouter l'élément de base juste après la <head> tag. Si le app dossier est le dossier racine de l'application, comme c'est pour notre application, définissez la href valeur exactement comme illustré ici.

La <base href="/"> raconte l'angle de routeur ce qui est de la partie statique de l'URL. Le routeur puis modifie seulement la partie restante de l'URL.
```
<head>
  <base href="/">
  ...
</head>
```
Sinon 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 fichier d'amorçage.

Dans les anciennes versions les importations devait ê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';
```
>= beta.17
```
import {APP_BASE_HREF} from 'angular2/platform/common';
```
Voir aussi Localisation et HashLocationStrategy cessé de fonctionner en version bêta.16
- Petit exemple de deuxième façon: bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
- J'ai dû ajouter de la ligne d'importation import {provide} from 'angular2/core'; pour être en mesure d'utiliser les fournir.
- J'ai dû importer de la ligne de import {APP_BASE_HREF} from 'angular2/router';
- Merci pour les mises à jour. Je n'utilise pas TS moi-même (seulement Dart) et mon TS les connaissances sont encore limitées.
- Je recommande fortement d'inclure structure de répertoire du projet ici afin de le rendre plus clair. J'ai fait une erreur il suffit d'inclure <base href="/"> dans mon projet, en raison des différences de structure de répertoire du projet. Il m'a fallu un certain temps pour comprendre la raison.
- Quel est votre Projet de la structure. / est commun, pour certains cas, il peut avoir besoin d'un chemin d'accès différent.
- à compter de ce jour, (le 14 janvier 2017), <base href="/"> fonctionne très bien pour moi, sauf quand on essaie de tester mon application en utilisant un Banc de test. Dans ce cas, je dois fournir un APP_BASE_HREF
- oui, c'est censé fonctionner. Seulement quand vous servir de l'application sur un sous-répertoire comme http://example.org/somesub/index.html ou similaire, vous avez besoin d'un autre chemin comme base="/somesub"
- Mon projet a des éléments SVG rempli avec des motifs d'image. Les images n'ont jamais été affichée dans Firefox quand <base href="/" /> a été définie dans le fichier (pour "/", "./", "#" ou tout autre chemin d'accès de base, peu importe la façon dont les chemins de l'image d'eux-mêmes ont été spécifiés dans le modèle). La seule solution qui a finalement travaillé était d'utiliser APP_BASE_HREF à la place. Une vraie vie!
- tenez-vous bien, mais <base href="/"> est exactement la raison pour laquelle angulaire versions sont incapables d'être ouvert, il suffit de l'ouvrir index.html à partir du dossier local (sans serveur web)... je ne comprends pas pourquoi angulaire besoin de cette base href
- Je doute que cela soit lié. Angulaire a besoin d'un serveur en raison de contraintes de sécurité dans le navigateur (peut être désactivé par les arguments de ligne de commande). Angulaire peut, au lieu de <base> également être configuré avec APP_BASE_HREF
- Je veux ajouter à votre réponse, si vous avez dans votre code source index.html un <base> sur le tag de substituer n'importe APP_BASE_HREF ou ng build --base href; les valeurs. Après removng, je peux modifier la base href partir de n'importe quel moyen.
- J'avais prévu de la face. à l'Intérieur Angulaire de code APP_BASE_HREF doit l'emporter sur les <base href="...">. APP_BASE_HREF ne pas affecter d'autres domaines où <base href="..."> a un effet, comme SVG refs ou similaire.
- Alors, quelle est la cause de ng construire à ignorer la APP_BASE_HREF si la base href est l'ensemble de la src index.html dans Angulaire 5.x ?
- pas sûr de ce que tu veux dire avec "ignorer la APP_BASE_HREF". APP_BASE_HREF n'est utilisé que par Angulaire de code comme le routeur ou certains de code personnalisé qui pourrait injecter APP_BASE_HREF. Peut-être que vous vous attendez à avoir un certain effet, il n'est pas censé avoir?
- Je m'attendais à réglage --base-href /mypath pour mettre à jour le <base href="/mypath", mais il n'a pas, en supprimant le <base> à partir de index.html(source) a créé la balise dans le répertoire dist. Ce comportement n'était pas expliqué dans toutes les docs que j'ai lu.
- Je ne sais pas à propos de --base-href ..., mais qui ne semble pas être liée à APP_BASE_HREF, seulement pour <base href="...">
- C'est la bonne réponse. Je reçois chaque fois que je créer un nouveau *.spec.ts fichier de test. Il est toujours nécessaire de construire un environnement d'exécution.
- J'ai eu cette erreur sur un test .spec.ts tout en utilisant Location. - Je ajouter de la RouterTestingModule et l'erreur disparaît
InformationsquelleAutor Günter Zöchbauer
30

J'ai eu étaient confrontés au même problème avec Angular4 et de Jasmin tests unitaires; donnée ci-dessous la solution a fonctionné pour moi

Ajouter ci-dessous les instruction d'importation
```
import { APP_BASE_HREF } from '@angular/common';
```
Ajouter de la déclaration ci-dessous pour la configuration du Banc d'essai:
```
TestBed.configureTestingModule({
    providers: [
        { provide: APP_BASE_HREF, useValue : '/' }
    ]
})
```
InformationsquelleAutor Dilip Nannaware
9

Vous pouvez également utiliser hachage basée sur la navigation en incluant les éléments suivants dans l'app.le module.ts
```
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
```
et par adjonction, à la @NgModule({ ... })
```
@NgModule({
  ...
  providers:    [
      ProductService, {
          provide: LocationStrategy, useClass: HashLocationStrategy
      }
  ],
  ...
})
```
“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.”

InformationsquelleAutor Lionel Morrison
8

Depuis la version 2.0 beta 🙂
```
import { APP_BASE_HREF } from 'angular2/platform/common';
```
- Comme d'Rc6 tout cela dans le fournisseur de maintenant: angulaire.io/docs/ts/latest/api/common/index/...
- Cela m'a aidé lors de mon spec dans le Karma a échoué avec l'Erreur: Pas de base href ensemble. Veuillez fournir une valeur pour le APP_BASE_HREF jeton ou ajouter un élément de base pour le document.
InformationsquelleAutor fireaxe
4

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

Ajouter instruction d'importation en haut comme ci-dessous:
```
import {APP_BASE_HREF} from '@angular/common';
```
Et ajouter en dessous de la ligne à l'intérieur de @NgModule
```
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
```
Reff: https://angular.io/api/common/APP_BASE_HREF
- Pourquoi ne useValue besoin d'être "/mon/app'?
InformationsquelleAutor Suresh Kamrushi
3

c'est juste que ajouter le code ci-dessous dans le index.html balise head
```
   <html>
    <head>
     <base href="/">
      ...
```
qui a travaillé comme un charme pour moi.

InformationsquelleAutor naram kiran
0

Vérifier votre index.html.
Si vous avez accidentellement supprimé la partie suivante, l'inclure et il sera bien
```
<base href="/">

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

Vous devez vous connecter pour publier un commentaire.