Routing und navigation im Winkel 2

Gehe ich durch die tutorials für die Winkel 2 und in der Lage gewesen, um eine einfache Anwendung und Ausführung. Nun, ich bin bewegen Sie sich auf der routing-und Navigations-Teil hier gefunden https://angular.io/docs/ts/latest/guide/router.html, aber etwas funktioniert nicht für mich.

Ging ich zu den live-Beispiel in Plunker runtergeladen und den code von dort. Ich habe dann das setup eine Lösung in Visual Studio 2015 und eingesteckt in all der code aus dem Plunker download. Die Anwendung funktioniert perfekt, außer für eine Sache, die navigation scheint nicht zu funktionieren, wie die Dokumentation würde scheinen, zu zeigen.

Ich debugging starten Sie die Anwendung in Visual Studio mithilfe von IIS Express-und Chrome-browser. Die Hauptseite lädt richtig und ich kann Sie auf die links für die Krise-Center und Helden. Wenn ich auf die links, die Komponente Ansichten ordnungsgemäß geladen und alles sieht perfekt aus.

Nun, wenn ich versuche zu navigieren, einfach durch Eingabe in der URL, die Komponente Ansichten nicht geladen werden und alles, was ich habe ist eine leere Seite.

Zum Beispiel, ich debugging starten Sie die Anwendung in Visual Studio und der Chrome-Browser öffnet sich mit der URL http://localhost:56074/. Die Startseite wird korrekt geladen mit der "Komponente " Router" - header und die beiden links für "Crisis Center" und "Helden". Wenn ich jetzt einfach gehen Sie zu der Adressleiste und fügen Sie "/Krise-center" an das Ende des URL, so wie es aussieht http://localhost:56074/crisis-center, erhalte ich eine leere Seite. Die Chrome Konsole zeigt folgenden Fehler:

BEKOMMEN http://localhost:56074/crisis-center 404 (Nicht Gefunden)
Navigiert http://localhost:56074/crisis-center

und die Netzwerk-Ablaufverfolgung zeigt deutlich eine 404 für die Krise-center. In der Tat, wenn ich die Navigations-link auf der Haupt-Seite für Krise-Center und klicken Sie auf es, um zu zeigen, die Krise center-Komponente anzeigen und dann einfach auf den refresh-button zum aktualisieren der Seite, während in der Krise-center-Sicht, das gleiche Ergebnis passiert.

Dies ist ein Visual Studio-Problem? IIS Express? Andere Ideen?

Wir sind ein .Net Entwicklung shop und unsere primäre Entwicklungsumgebung ist Visual Studio. Wenn dies ein Problem mit der Entwicklung einer Eckigen 2-Anwendung in Visual Studio mithilfe von IIS Express, kann dies ein show-stopper.

Wenn jemand will, um zu versuchen, die gleiche Sache, die ich kann den Reißverschluss meiner VS-Lösung und teilen.

Jemand versucht eine Eckige 2-Anwendung in Visual Studio mithilfe von IIS Express, vielleicht kann die mir sagen was ich falsch mache?

Sie müssen setup Ihre server zurückkehren Standard-Seite (in der Regel index.html), wenn es nicht eine Ressource. Ich funktionierte nicht mit dem von IIS für eine lange Zeit, so kann Ihnen nicht genau sagen, was zu tun ist...
Siehe: stackoverflow.com/questions/34541532/...
Möglich, Duplikat der Angular 2.0 router funktioniert nicht auf Neuladen des Browsers

InformationsquelleAutor meyousikmann | 2016-01-28

  1. 2

    Für dieses Problem, müssen Sie PathLocationStrategy oder HashLocationStrategy für Ihre Anwendung. Es ist verfügbar in der "angular2/router".

    Beispiel für die Verwendung HashLocationStrategy:

    boot.ts

    bootstrap(AppCmp, [
       ROUTER_PROVIDERS,
       provide(LocationStrategy, {useClass: HashLocationStrategy})
   ]);

    und Ihre wichtigste Komponente,

    class AppCmp {
          constructor(location: Location) {
          location.go(location.path());
       }

    Den Standort.Pfad() dynamisch gibt den Pfad für die Seite geladen werden.

    InformationsquelleAutor Bharathi Mohan

  2. 20

    Winkel-2 standardmäßig verwendet HTML5-routing, müssen Sie entweder anzeigen alle server-Anfragen zu index.html indem Sie die folgenden web.config

    <rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="PATH TO INDEX.HTML" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

    oder die Umsetzung des HashLocationStrategy, wie beschrieben in eckigen docs hier

    provide(LocationStrategy, {useClass: HashLocationStrategy})
    Ich weiß nicht, wie ich verpasste die Winkel-docs. Ich fühle mich auch ziemlich lame, dass ich diese Frage gestellt, wenn es gibt andere, die sind ziemlich ähnlich. Klar ich bin nicht die erste person ausgeführt wurde. Sorry für die doppelte Frage. Deine Antwort ist genau richtig, aber ich tatsächlich verwendet Bharathi beantworten, weil der AppCmp code.
    das ist großartig - vor allem für einen business-line-Typ-app, wo # URLs don ' T look out of place
    Vielen Dank für das teilen der <rewrite> <rules>. Ich war mit <rewrite> <rewriteMaps> <rewriteMap name="Redirects"> <add key="/catalog" value="/index.html" /> ... und es hat nicht redirect auf die angeforderte Seite. Statt alle Wege wurden umleiten zu index.html. Dies löste mein Problem.
    Es gibt ein Problem mit diesem code: alle meine JSON-get-Anfragen geben Fehler aufgrund der globalen url-Umleitung. Ich habe versucht, mit einem regex, aber es funktioniert nicht <match url="^((?!\/api\/).*)$" ignoreCase="false" />. Irgendwelche Ideen?
    Dieser arbeitete für mich, aber ich hatte mit der Installation des URL rewrite-Modul zunächst (natürlich!) iis.net/downloads/microsoft/url-rewrite

    InformationsquelleAutor stas.ivash

  3. 3

    Neben @stasivash Antwort:
    Wenn Sie Schwierigkeiten haben, die Bereitstellung von ajax-Anfragen auf einen bestimmten Pfad in Ihrem Projekt, wie YOUR-DOMAIN/api/... ich schlage vor hinzufügen der folgenden Bedingung:

    <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />

    ergibt:

    <rewrite>
  <rules>
      <rule name="redirect all" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
              <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" appendQueryString="true" />
      </rule>
  </rules>
</rewrite>
    Ich würde empfehlen, Sie redirect url="/" statt " url="/index.html"

    InformationsquelleAutor Adrian Moisa

  4. 1

    Alte Frage, aber ich wollte diesen Vorschlag als alternative für zukünftige Leser als bevorzugte ich die Rewrite-Methode:

    Aufbauend auf den Antworten von stas.ivash und Adrian Moisa: ich habe Ihre URL-Rewrite-Vorschläge, aber statt einer Liste mit Routen, modifizierte ich die regex-route alles unter Ausschluss der Dateien, die unsere Winkel-2 CLI generiert, die app muss mit den gegebenen Erweiterungen (.bundle.js, .bundle.map, etc...):

    <?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

    Kann ich nicht wirklich sprechen, um die Auswirkungen auf die Leistung, mit diesem RegEx-Lösung in einem Produktion Umgebung, aber es funktioniert gut für uns Dev und Bühne Umgebungen.

    InformationsquelleAutor Steve Gomez

  5. 0

    Dies ist meine Lösung: https://csjdpw.atlassian.net/wiki/display/~Genhan.Chen/404+Ausgabe+für+Winkel+2+routing

    Bezieht sich auf ein anderes posting: AngularJS 2 routing

    Link nur Antworten entmutigen - denn Sie sind vorbehaltlich der link rot.

    InformationsquelleAutor G Chen

  6. 0

    Können Sie beheben die Fehler durch die Implementierung von hash-Standort-Strategie:

    Aktivieren HashLocationStrategy es ist so:

    RouterModule.forRoot(routes, {useHash: true})

    URL enthalten einige Daten vorangestellt, mit einem # Charakter.

    Den # Teil der URL, der aufgerufen wird das hash-fragment ist. Es ist nie an den server gesendet,

    Beispiel: http://example.com/#/clients

    InformationsquelleAutor ferralucho

Schreibe einen Kommentar