2015-12-31 53 views
13

這整個新的路線句法聽起來很好是真實的,現在我想它實際上是。我放棄了試圖使其工作,在這裏我注意到,甚至沒有Angular 2頁面的主要例子。如果你打開實例並嘗試它,只需點擊它就可以很酷,並且你可以看到url中的路徑被改變了,但它只是改變了字符串路徑並不存在,如果你複製你的url併發送它給他人他們將得到以下錯誤:使用HTML5路由時,Angular 2的路由器是否被破壞?

{ 
    "statusCode": 404, 
    "error": "Not Found" 
} 

地獄,即使你只是刷新頁面,你會得到同樣的錯誤。

如果你想重現該問題打開這個網址:

https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

點擊實時預覽右上方的按鈕,在「在單獨的窗口中啓動預覽」,等待它加載頁面,當你看到網址更改爲類似:

http://run.plnkr.co/KMzM8hkaCyhlnf3b/dashboard

做一個F5刷新頁面,你會得到錯誤。

這是一個錯誤,它應該工作的方式,還是他們甚至沒有嘗試的方式?他們是否已經開始再次使用糟糕的路由器實現,或者我完全失去了試圖使其工作的方式?請指教 !

我在猜測我最好使用hashtag實現。

回答

13

實際上,由於瀏覽器中的實際地址正在更新(並且沒有#/ hashbang方法),因此在上傳應用程序時出現404錯誤是很正常的。默認情況下,HTML5歷史記錄用於在Angular2中重用。

如果您不想要404錯誤,則需要更新服務器以爲每個路徑路徑提供index.html文件。

此鏈接也可以幫助你:When I refresh my website I get a 404. This is with Angular2 and firebase

希望它可以幫助你, 蒂埃裏

+0

是的,我不知道它爲什麼會發生,這就是爲什麼我認爲它太好,不能成爲真實的原因。我沒有想到的是,以這種方式使用它的目的是什麼,甚至更糟糕,在這種模式下默認功能。重定向到索引可能是有意義的,如果你的應用不僅僅是客戶端,而且對於它的外觀,使用這種框架的快速應用的最新方法不實現後端,它們只是使用服務。我的後端沒有後端。不過,這是一個有效的場景/用例。我會嘗試一下,如果它的工作,我會接受你的答案,謝謝=) – Langley

+0

是的,你似乎可以使它工作在一個特定的場景和配置,他們從來沒有指定。我仍然認爲這不應該是默認行爲,或者他們至少應該告訴你這個問題。謝謝老師的幫助! 這一個幫助太:http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Langley

+1

@Langley FYI,這仍然是一個懸而未決的問題正在討論在'angular2'回購。 https://github.com/angular/angular/issues/4735。也就是說,在瀏覽器包含HTML5'history.pushState()'支持之前''HashLocationStrategy'是一個必要的破解。 'PathLocationStrategy'是未來的正確方法,但我們需要更好的工具來幫助沒有太多後端知識的前端開發人員開始使用。 –

1

這是設計的(HTML5沒有被Angular引入)。切換到HashLocationStrategy或使用知道如何處理(重定向)此類請求的服務器。 另請參見https://github.com/angular/angular/issues/4735

+1

路由器是由角創建的,他們默認了它的功能,在某種程度上這是越野車沒有關於這個問題太多的解釋。這與HTML5添加他們正在使用的方法無關。 – Langley

+1

更好的文檔總是一件好事,但這是通過HTML5的設計,並且不是**特定的。 Angular添加所有MDN文檔是沒有意義的。 –

+0

瀏覽器基於HTML規範實現該功能的事實與使用它的框架無關,甚至建議以不正確的方式使用它。 – Langley