angular 發佈項目及可能遇到的報錯

根據官方文檔，我們可以通過下面三個步驟，將項目發佈到服務器上：

1.使用開發環境進行構建：ng build --prod ；
2.把輸出目錄（默認爲 dist/）下的每個文件都複製到到服務器上的某個目錄下；
3.配置服務器，讓缺失的文件都重定向到 index.html 上；

一切都很好，但是你也可能遇到這種問題：只要點擊刷新，network一直報錯404…

那麼應該怎麼解決這個問題呢？

如上圖：在app.module.ts文件中，做如下修改即可：

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

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

接下來，我們來看看官方對LocationStrategy的解釋：

LocationStrategy負責從瀏覽器的URL表示和讀取路線狀態。 Angular提供了兩種策略：HashLocationStrategy和PathLocationStrategy。

HashLocationStrategy生成類似 http://example.com#/foo 的URL，

而PathLocationStrategy生成 http://example.com/foo 作爲等效URL。