Routing i nawigacja w Angular 2

Question

Przechodzę przez samouczki dla Angular 2 i udało mi się uruchomić prostą aplikację. Teraz przechodzę do części routingu i nawigacji znajdującej się tutaj https://angular.io/docs/ts/latest/guide/router.html, ale coś nie działa dla mnie.

Poszedłem do przykładu na żywo w Plunker i pobrałem tam kod. Następnie skonfigurowałem rozwiązanie w Visual Studio 2015 i podłączyłem cały kod z pobierania Plunkera. Aplikacja działa doskonale, z wyjątkiem jednej rzeczy, nawigacja nie działa tak, jak wynika z dokumentacji.

Uruchamiam debugowanie aplikacji w Visual Studio przy użyciu IIS Express i przeglądarki Chrome. Strona główna ładuje się poprawnie i mogę kliknąć linki do Crisis Center i Heroes. Kiedy klikam linki, widoki komponentów poprawnie ładują się i wszystko wygląda idealnie.

Teraz, jeśli spróbuję nawigować po prostu wpisując adres URL, widoki komponentów nie ładują się i wszystko, co mam, to pusta strona.

Na przykład uruchamiam debugowanie aplikacji w Visual Studio, a przeglądarka Chrome otwiera się pod adresem URL . Strona główna jest poprawnie załadowana nagłówkiem "Component Router" i dwoma linkami do "Crisis Center" i "Heroes". Teraz, jeśli po prostu przejdę do paska adresu i dodaję "/ crisis-center" na końcu adresu URL, aby wyglądało na http://localhost:56074/crisis-center, otrzymuję pustą stronę. Konsola Chrome pokazuje następujący błąd:

GET http://localhost:56074/crisis-center 404 (nie znaleziono) nawigować do http://localhost:56074/crisis-center

i sieci prześledzić wyraźnie pokazuje 404 na kryzys-center. W rzeczywistości, jeśli użyję linku nawigacyjnego na stronie głównej Centrum kryzysowego i kliknę go, aby wyświetlić widok komponentu centrum kryzysowego, a następnie po prostu naciśnij przycisk odświeżania, aby odświeżyć stronę w widoku centrum kryzysowego, nastąpi ten sam wynik .

Czy to jest problem Visual Studio? IIS Express? Inne pomysły?

Jesteśmy sklepem rozwojowym .Net, a naszym podstawowym środowiskiem programistycznym jest Visual Studio. Jeśli jest to problem związany z tworzeniem aplikacji Angular 2 w Visual Studio przy użyciu IIS Express, może to być korek wystawowy.

Jeśli ktoś chce spróbować tego samego, mogę rozpakować moje rozwiązanie VS i udostępnić.

Ktoś wypróbował aplikację Angular 2 w Visual Studio przy użyciu IIS Express, która może może mi powiedzieć, co robię źle?

Answer 1

Do tego wydania należy użyć PathLocationStrategy lub HashLocationStrategy dla swojej aplikacji. Jest dostępny w "kątowym2/routerze".

Przykład pomocą HashLocationStrategy:

rozruchu.ts

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

aw głównym składnikiem,

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

location.path() dynamicznie daje ścieżkę dla strony do załadowania.

Answer 2

kątowa 2 domyślnie używa HTML5 routing, trzeba albo do mapowania wszystkich żądań serwera index.html przez dodanie następujących do 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> 

lub wdrożyć HashLocationStrategy, jak opisano w kanciastych docs here

provide(LocationStrategy, {useClass: HashLocationStrategy}) 

Answer 3

Oprócz @stasivash odpowiedź: Jeśli masz problem z płaceniem ajax żądania do pewnej ścieżki w projekcie, takie jak YOUR-DOMAIN/api/..., proponuję dodanie następującego warunku:

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

powstałego w:

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

Answer 4

to jest moje rozwiązanie: https://csjdpw.atlassian.net/wiki/display/~Genhan.Chen/404+issue+for+Angular+2+routing

Odnosi się do innej publikacji: AngularJS 2 routing

Answer 5

stare pytanie, ale chciałam, aby zapewnić tę propozycję jako alternatywa dla przyszłych czytelników, wolałem metodę Rewrite:

opierając się na odpowiedziach z stas.ivash i Adrian Moisa: Kiedyś ich Przepisz URL sugestie, ale zamiast wymieniając się tras, zmodyfikowałem regex trasy wszystko wykluczenie plików, które nasz kątowa 2 CLI wygenerowanych potrzeb aplikacji, z podanych rozszerzeniach (.bundle.js, .bundle.map, itp ...):

<?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> 

nie mogę mówić do implikacji Wyniki wykorzystania tego rozwiązania regex w Produkcji środowiska, ale to działa dobrze dla nas na naszej Dev i Stage środowiskach.

Answer 6

można naprawić błąd poprzez wdrożenie strategii hash Lokalizacja:

Aby włączyć HashLocationStrategy to tak:

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

URL może zawierać pewne dane poprzedzany z # charakteru.

Część adresu URL nazywana jest fragmentem skrótu. To nigdy nie wysłane do serwera,

przykład: http://example.com/#/clients