Angular 2 Router ohne Basis-Href-Set

195

Ich erhalte eine Fehlermeldung und kann nicht herausfinden, warum. Hier ist der Fehler:

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)

Weiß jemand, warum der Router dies auslöst? Ich benutze Angular2 Beta

Hier ist mein 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
quelle

Antworten:

376

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

Fügen Sie das Basiselement direkt nach dem <head>Tag hinzu. Wenn der appOrdner wie für unsere Anwendung das Anwendungsstammverzeichnis ist, stellen Sie den hrefWert genau wie hier gezeigt ein.

Das <base href="https://stackoverflow.com/">teilt dem Angular-Router mit, was der statische Teil der URL ist. Der Router ändert dann nur den verbleibenden Teil der URL.

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

Alternativ hinzufügen

> = Angular2 RC.6

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

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

in Ihrem Bootstrap.

In älteren Versionen mussten die Importe so sein

<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';

Siehe auch Location und HashLocationStrategy funktionieren in Beta.16 nicht mehr

— Günter Zöchbauer
quelle
3
Kleines Beispiel für den zweiten Weg:bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue : '/'})]);
— malloc4k
1
Ich musste die Importzeile hinzufügen, um Provide verwenden import {provide} from 'angular2/core';zu können.
— CorayThan
2
Ich musste lineimport {APP_BASE_HREF} from 'angular2/router';
— jimmystormig
Danke für die Updates. Ich benutze TS nicht selbst (nur Dart) und meine TS-Kenntnisse sind immer noch begrenzt.
— Günter Zöchbauer
1
Mein Projekt enthält SVG-Elemente, die mit Bildmustern gefüllt sind. Die Bilder wurden nie in Firefox angezeigt , wenn <base href="https://stackoverflow.com/" />in der Datei (für festgelegt wurde "/", "./", "#"oder jede andere Basispfad, unabhängig davon , wie die Bildpfade sich in dem Muster angegeben wurden). Die einzige Lösung, die schließlich funktionierte, war APP_BASE_HREFstattdessen zu verwenden . Ein echter Lebensretter!
— ConnorsFan
34

Ich hatte ein ähnliches Problem mit Angular4- und Jasmine-Unit-Tests. Die unten angegebene Lösung hat bei mir funktioniert

Fügen Sie die folgende Importanweisung hinzu

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

Fügen Sie die folgende Anweisung für die TestBed-Konfiguration hinzu:

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

Sie können auch die Hash-basierte Navigation verwenden, indem Sie Folgendes in app.module.ts aufnehmen

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

und indem Sie dem @NgModule Folgendes hinzufügen ({...})

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

Angular 2-Entwicklung mit TypeScript

„HashLocationStrategy - Der URL wird ein Hash-Zeichen (#) hinzugefügt, und das URL-Segment nach dem Hash identifiziert die Route, die als Webseitenfragment verwendet werden soll, eindeutig. Diese Strategie funktioniert mit allen Browsern, einschließlich der alten. “

Auszug aus: Yakov Fain Anton Moiseev. "Angular 2-Entwicklung mit TypeScript."

— Lionel Morrison
quelle
Danke Lionel! Dies ist ausgezeichnet und hat ein Problem gelöst, das ich mit der obigen APP_BASE_HREF-Lösung hatte und das bei Verwendung von URL-Parametern wie "product /: id" fehlschlägt. Vielen Dank!
— Stokely
6

Es ist nur so, dass der folgende Code im head-Tag index.html hinzugefügt wird

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

das hat für mich wie ein Zauber gewirkt.

— Naram Kiran
quelle
5

Mit Angular 4 können Sie dieses Problem beheben, indem Sie die Datei app.module.ts wie folgt aktualisieren :

Fügen Sie die Importanweisung oben wie folgt hinzu:

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

Und fügen Sie die folgende Zeile hinzu @NgModule

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

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

— Suresh Kamrushi
quelle
Warum muss useValue '/ my / app' sein?
— Dilip Nannaware
5

Angular 7,8 Fix befindet sich in app.module.ts 

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

innerhalb von @NgModule hinzufügen

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

— Feng Zhang
quelle
Ich habe diesen Fehler festgestellt, als ich versucht habe, eine Komponente für ein eckiges Storybook zu laden. Diese Komponente war vom Router abhängig. Es hat den Fehler behoben !!
— Arpan Banerjee
1

Überprüfen Sie Ihre index.html. Wenn Sie das folgende Teil versehentlich entfernt haben, fügen Sie es hinzu, und es ist in Ordnung

<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
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.