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 {
}
https://angular.io/docs/ts/latest/guide/router.html
Ajoutez l'élément de base juste après la balise
<head>
. Si le dossierapp
est la racine de l'application, comme c'est le cas pour notre application, définissez la valeurhref
exactement , comme indiqué ici.
Le <base href="/">
indique au routeur Angular quelle est la partie statique de l'URL. Le routeur ne modifie alors que la partie restante de l'URL.
<head>
<base href="/">
...
</head>
Alternativement 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 bêta 16
J'avais rencontré un problème similaire avec les tests unitaires Angular4 et Jasmine; la solution ci-dessous a fonctionné pour moi
Ajouter ci-dessous la déclaration d'importation
import { APP_BASE_HREF } from '@angular/common';
Ajoutez l'instruction ci-dessous pour la configuration TestBed:
TestBed.configureTestingModule({
providers: [
{ provide: APP_BASE_HREF, useValue : '/' }
]
})
Vous pouvez également utiliser la navigation par 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
}
],
...
})
"HashLocationStrategy: un signe de hachage (#) est ajouté à l'URL et le segment d'URL après le hachage identifie de manière unique la route à 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 angulaire 2 avec TypeScript.”
Depuis la version bêta 2.0 :)
import { APP_BASE_HREF } from 'angular2/platform/common';
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 de @NgModule
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
il suffit que vous ajoutiez le code ci-dessous dans la balise head index.html
<html>
<head>
<base href="/">
...
cela a fonctionné comme un charme pour moi.
Vérifiez votre index.html. Si vous avez accidentellement retiré la partie suivante, incluez-la et tout ira bien
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">