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/

ReSharper Tips for .NET Developer

When I first started to use ReSharper with Visual Studio 2010, I was so impressed by its creativities and practicalities. My productivities have been boosted. My code quality has been improved. My code has become more consistent and readable. I have become a big fan of ReSharper and JetBrains. Since then ReSharper has become an indispensable tool under my toolbelt. Over the years, JetBrains added more products in its offering for .NET developers. In 2015/2016, ReSharper 10 has been bundled up with other popular .NET tools dotCover, dotTrace, dotMemory, and dotPeek and rebranded as ReSharper Ultimate. The license model changed from product to subscription.

A speaker at Houston TechFest once said that ReSharper would make developers’ mind dull because it is doing so much and the developers are losing his/her programming skills. The speaker’s argument came from that some developers can’t even write code without IDE (such as on whiteboard). I didn’t really agree with him but I can totally understand where the speaker’s concern came from. I think ReSharper is doing an amazing job to help developer write better code, easily examine, and refactor the existing code bases so that they will spend less time and produce better code.

ReSharper Tips

         Navigation:

                Ctrl + T. Then type. Or you can type also just the acronym in ALL capital letters, or  type / for more specific filters.

                It’s really easy to navigate to base symbol and derived symbol, ALT-Home or Alt-End.

-         Code Quality:

                It can detect unreachable code, unused variable, and much more.

                name conventions issues

                shorter code / more readable code, such as null propagator, string interpolation, expression bodied members

-      

           Refactoring.

                Extract to interface.

                Move to another file.

                Push members down.

                Make method non-static.

-          Unit testing is so much easier with ReSharper test sessions. You can customize what tests to be included in different test sessions.

-          ReSharper Build is cool too.  It has a visual interface to indicate which projects are going in parallel. Also, it is out of the process so your visual studio process should be slowed down.

-          Have you ever misspelled a word and got embarrassed in code review? There is one of the extension called ReSpeller. Resharper is an extension to Visual Studio. ReSpeller is an extension of Resharper. Check it out.