2016-04-21 3 views
5

tun Ich war an diesem Quellcode suchen: https://github.com/angular/angular.io/blob/master/public/docs/_examples/toh-5/dart/lib/app_component.dartRouting nicht für mich arbeiten, wenn eine harte refresh

und es scheint, dass meine Anwendung leitet jetzt, wenn ich an die Wurzel gehen.

localhost: 8080/

Das Routing-Updates, wie ich um meine Anwendung zu bewegen, aber es scheint, dass, wenn ich auf etwas bin: localhost:8080/dashboard in einem Basecase und eine harte refresh tun, es funktioniert nicht. Es wird mir einen 404 not found! Fehler geben.

Es wird nur funktionieren, wenn ich tue: localhost:8080/#!/dashboard, aber das ist nicht die Adresse in meiner Anwendung übergeben. i

Im index.html haben: <base href="/">

Meine App_Component.dart Datei ist wie folgt:

import 'package:angular2/angular2.dart'; 
import 'package:angular2/router.dart'; 

import 'hero_component.dart'; 
import 'heroes_component.dart'; 
import 'dashboard_component.dart'; 
import 'hero_service.dart'; 
@Component(
    selector: "my-app", 
    directives: const [ROUTER_DIRECTIVES], 
    providers: const [HeroService, ROUTER_PROVIDERS], 
    templateUrl: "app_component.html") 
@RouteConfig(const [ 
    const Route(
     path: "/dashboard", 
     name: "Dashboard", 
     component: DashboardComponent, 
     useAsDefault: true), 
    const Route(
     path: "/detail/:id", name: "HeroDetail", component: HeroDetailComponent), 
    const Route(path: "/heroes", name: "Heroes", component: HeroesComponent) 
]) 
class AppComponent { 
    String title = "Tour of Heroes"; 
} 

Es I Routing scheint für alles außer dieser Arbeit haben.

Mein gewünschter Endzustand würde tun: localhost: 8080/Detail/14 und es würde die richtige Komponente öffnen. Dies ist etwas, das jetzt nicht an einer neuen Site-Referenz durchgeführt wird, sondern vielmehr an der Navigation in der gesamten Anwendung.

Antwort

3

-HashLocationStrategy Änderung wechseln, die Anbieter zu

bootstrap(AppComponent, [ 
    HeroService, 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, useClass: HashLocationStrategy) 
]) 

Wenn Sie PathLocationStrategy verwenden möchten, können Sie diese pub serve -wrapper https://pub.dartlang.org/packages/pub_serve_rewrites verwenden, die PathLocationStrategy mit pub serve zu verwenden.

Für die Bereitstellung müssen Sie den Webserver konfigurieren, den Sie verwenden, um HTML5 pushState zu unterstützen.

+1

Perfekt! Funktioniert super. Ich recherchierte und bemerkte es hier: https://github.com/ng2-dart-samples/router/blob/master/web/main.dart auch. Ich mag diese Antwort am meisten. – Fallenreaper

+0

Sie können zum Beispiel auch nginx als Proxy für die Entwicklung anstelle von pub_serve_rewrites verwenden. Ja, Kasper war ziemlich aktiv in der Angular2 Dart Community. Anscheinend ist er gerade mit seinem Mathe-Studium beschäftigt: - / –

1

Routen nur in der App gibt, Server nichts weiß, überprüft er nur Pfad /dashboard oder /detail/14 für Standardseite/Datei, die nicht existiert.

Sie müssen den Server-Router so konfigurieren, dass er für alle Ihre App-Routen zur App index.html (Ihr html-Name hier) navigiert.

0

Wenn localhost:8080/#/dashboard funktioniert aber localhost:8080/dashboard schlägt fehl, schlägt es vor, dass Sie HashLocationStrategy statt PathLocationStrategy verwenden.

Überprüfung Ihrer bootstrap() Funktion oder woanders, stellen Sie sicher, dass kein HashLocationStrategy injiziert wird.

Verwandte Themen