Upgrade Angular 4 to Angular 5

Here are the steps to upgrade Angular 4 to Angular 5. It only took me a few hours to upgrade.

1. Upgrade TypeScript to ^2.4.2

npm install typescript@2.4 --save-dev

2. Upgrade RXJS to ^5.5.0

npm install rxjs@^5.5.0 --save

3. Upgrade Angular Material to ^5.2.4

npm install @angular/cdk@^5.2.4 @angular/material@^5.2.4 --save                                                  

4. Upgrade Angular to ^5.2.9

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest --save

5. Update Material Modules

$ npm install -g angular-material-prefix-updater

$ mat-switcher -p tsconfig.json

6. Upgrade Angular CLI (Optional)

Also, most likely you want to also update your local project version, because inside your project directory it will be selected with higher priority than the global one:

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

How to Open Excel ( *.xls or *.xlsx) in Angular 4?

Problem

Angular is a platform to build SPA applications with web. If you want Angular application to access any files (like *.xls or *.xlsx) in a network share directly, the access will be blocked for security reasons. 

Solution 

Create A Web API Controller to return the file as StreamContent; Get the Blob using Angular http reponse.blob(); Create an object URL using createObjectURL(blob); Save the blob object to a file.

Details

1. Server - Controller Return Blob

var result = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(path, FileMode.Open, FileAccess.Read);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentType =
new MediaTypeHeaderValue("application/octet-stream");

Here are more details: 

https://stackoverflow.com/a/26040968/464647/

2. Angular Http - Get Blob

Include the RequestOptionsArgs when you send request.

Specify the field responseType : ResponseContentType inside RequestOptionsArgs to  ResponseContentType.Blob.

Here are more details: 

https://stackoverflow.com/a/43164489/464647

3  HTML - Save Blob to File

const a = document.createElement('a');
a.download = filename;
a.href = window.URL.createObjectURL(blob);
a.click();
window.URL.revokeObjectURL(a.href);

Here are more details: 

https://jsfiddle.net/koldev/cW7W5/