正常在開發中，我們常用：

$ ng build –watch

這時候對應的 _Layout.cshtml 為：

<script src=”~/ClientApp/dist/inline.bundle.js”></script>
<script src=”~/ClientApp/dist/polyfills.bundle.js”></script>
<script src=”~/ClientApp/dist/styles.bundle.js”></script>
<script src=”~/ClientApp/dist/vendor.bundle.js”></script>
<script src=”~/ClientApp/dist/main.bundle.js”></script>
</environment>

主要目的在於提供 Chrome 環境可以 debug，並且可以隨時監測程式碼是否有修改，隨時進行編譯。

但衍生的問題是速度會比較慢，尤其在正式環境是不能接受這樣的速度。可以透過 –prod 參數進行正式環境的編譯，會增加以下幾項工作：

The –prod meta-flag engages the following optimization features.

• Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
• Production mode: deploys the production environment which enables production mode.
• Bundling: concatenates your many application and library files into a few bundles.
• Minification: removes excess whitespace, comments, and optional tokens.
• Uglification: rewrites code to use short, cryptic variable and function names.
• Dead code elimination: removes unreferenced modules and much unused code.

更好的方式可以再進一步縮小檔案大小：

$ ng build –prod –build-optimizer

請注意，編譯出來的內容：

<environment include=”Production”>
<script src=”~/clientapp/dist/inline.318b50c57b4eba3d437b.bundle.js”></script>
<script src=”~/clientapp/dist/polyfills.b488325233b482097d13.bundle.js”></script>
<script src=”~/clientapp/dist/main.21c3b35bee403f2837dc.bundle.js”></script>
</environment>

這裡可以使用 asp.net core environment 區隔 Production & Development，同時 Production 的檔案名稱會加入 UUID，因此會隨時異動，如此就可以避免 client cache 所造成問題。

問題描述如下：如果有 master-detail 畫面，在 master 中控制 detail 的顯示（例如：查詢使用 list-component.html, 新增使用 add-component.html），如下圖：

整個頁面的html 設計如下：

<form #form="ngForm" (submit)="retrieveList()" class="form-horizontal" novalidate>
        ...
        <button type="button" class="btn btn-info" (click)="onQuery()">查詢 </button>
        <button type="button" class="btn btn-success" (click)="onAdd()">新增 </button>
    </div>
</form>
 
<router-outlet></router-outlet>

我們再查詢時候，使用 router.navigator：

onQuery() {
    this.router.navigate(["trace/list", this.careType, this.year, this.month]);
}

這時候設定不同條件按下【查詢】一次以上，查出來的資料會不斷的重疊，這是因為實際上查詢出來的資料是放入到 router-outlet 中，因為沒有清除，所以會不斷的累積。

解決方式是導入另外一個 empty-component 顯是空白資料，如下：

@Component({
    selector: 'trace-empty',
    template: '<p>請按下【查詢】資料</p>',
    styles: []
})
export class TraceEmptyComponent {
}

在 child routing 中，設定此 empty routing：

{
    path: 'trace', component: TraceFileComponent,
    children: [
        { path: '', component: TraceEmptyComponent },
        { path: 'list/:type/:year/:month', component: TraceListComponent },
        { path: 'edit/:type/:id', component: TraceEditComponent }
    ]
},

之後，在 input html 中，

<select type="text" name="Month" class="form-control" [ngModel]="month" (ngModelChange)="month=$event; onClear()"> … </select>

指定 onModelChange event 呼叫 onClear() 將畫面跳到 empty component 中：

onClear() {
    this.router.navigate(["trace"]);
}

使用結果會在點選月份時候，將 router-outlet 轉 empty component，然後按下查詢後，就會到真正顯示頁面，藉由 empty component 清空 router-outlet 來避免顯示疊加的問題。

在 Angular 中，處理檔案下載不是一件容易的事情，主要方法有以下兩種：

1. 透過 anchor 直接將檔案的下載連結放在網頁上：

<a href="/vpn/downloadFile?filename={{item.patientFile}}" class="btn btn-info btn-sm" type="button"
   ng-disabled="!item.patientFile" icon="fa-file-excel-o" target="_self">
    下載 Excel
</a>

其中 /vpn/download 就是用來下載檔案的方式

2. 直接在 angular client code 中處理

最快的方案（而且不需要花費時間）就是透過 HTML 5 FileSaver 套件，引用方式如下：

• 下載 npm package，這裡同時下載 typescript 定義檔，提供 Intellisense：

npm install file-saver –save

npm install @types/file-saver –save

透過 –save 會直接 update package.json file

• 透過 http get 下載檔案：

download() {
    this.http.get("/dailyreport/downloadExcel/" + id, { responseType: 'blob' })
        .subscribe(
            data => this.processFile(data),
            error => super.showMessage(AlertType.Danger, error)
        );
}
 
private processFile(data: any) {
    var blob = new Blob([data], { type: 'application/vnd.ms-excel' });
    FileSaver.saveAs(blob, "file.xlsx");
}

注意這裡使用 blob 型態。

• 在 Server side 將檔案轉成 filestream：

[HttpGet]
public IActionResult DownloadExcel(string filePath)
{
    var fileContents = System.IO.File.ReadAllBytes(filePath);
    return new FileContentResult(fileContents, "application/vnd.ms-excel");
}