Adding Font Awesome to ASP.NET Core Angular 2 Applications in Visual Studio 2017

If you’re using Visual Studio 2017’s SPA templates for Angular, no doubt you’ve wanted to add third-party libraries such as Font Awesome.  You could reference these dependencies in the index.html, but it would be better for performance if they were included in the webpack bundle.  If you’ve never worked with webpack before, this could initially be a little confusing.  But, don’t worry as it’s actually pretty simple.

Read more


Angular2+ SafeUrl Pipe

Instead of adding a function to the JavaScript of each of your components to properly display HTML links, use an Angular2 pipe.

Create a pipe service called safe-url.pipe.ts and add the following:

Next, inject the pipe service in your app.module.ts:

And, in your Angular module declarations section:

Now, to use in your view:


Adding Skype and Skype for Business HTML Links

Have you ever needed to add links into a web page that enabled a visitor to click to begin a chat or phone call with a Skype or Skype for business user? If you have the necessary plug-ins enabled in the browser, a phone number may be recognized automatically, but that can’t always be guaranteed. There are native URI’s to ensure that, if a site visitor has Skype or Skype for Business installed, a chat or phone call will be initialized.

Read more


IoT Asset Management Starter Kit

First demonstrated at Microsoft’s 2016 Ignite Conference in Atlanta, GA, the IoT Asset Management Starter Kit is a boiler plate project comprised of Node.js and Angular 2 that facilitates the quick development of an IoT project for Asset Management. The project brings all the necessary components – Azure IoT Hub, Stream Analytics, Heroku, MongoDB and Raspberry Pi 3 – together to build a working end-to-end IoT solution.

Read more


Excluding Object Properties in Angular's $scope.$watch

Want to $watch an object in Angular, but ignore changes on certain properties?  Here’s a function that will help you out:

And here’s how to use it…

And, finally a jsfiddle example.


Karma + Jasmine + Visual Studio (including Visual Studio Code)

I’ve been developing a LOT of Angular applications lately. Some of them are hybrid projects (Angular w/ MVC); some of my projects have been completely separated (Angular for client-side, with a separate project for an API). Regardless, I always want to ensure that my code has been thoroughly tested with unit tests and acceptance (E2E) tests. When developing hybrid projects, my preferred IDE is Visual Studio. When developing a pure, client-side project, my preferred IDE is Visual Studio Code as it has a lot less remnants/artifacts tied to a solution (.vs, .xproj, .csproj, etc.) eliminating the need for a ridiculously large .gitignore file.  Additionally, I will use WebStorm depending on the need.

Jasmine is a great framework for providing both unit testing and end-to-end, acceptance testing.  Coupled with Karma, Jasmine can monitor file changes to our client-side code and execute tests on every file change in order to ensure that all tests are always passing.  In this blog post, I will demonstrate how to set up and use Karma and Jasmine in both development environments.

Read more