Tuesday, October 31, 2017

Visual Studio 2017 (Enterprise) - Where are the Web performance and load testing tools?

Yesterday I wanted to do some performance testing before we put a new application into production. However when I opened Visual Studio (2017) I couldn’t find the Web performance and load testing tools.

Are there no longer available in VS 2017? Luckily, they still are. But they are not installed out-of-the-box.

Let’s open the Visual Studio installer and fix this:

  • Search for Visual Studio Installer and execute it

image

  • Click on More –> Modify

image

  • Go to the Individual components tab, scroll to the Debugging and testing section and select Web performance and load testing tools.

image

  • Click Modify to start the installation

Monday, October 30, 2017

C# 7: Lambdas vs Local functions

C# 7 introduces the concept of local functions. Local functions can be nested in other functions similar to anonymous delegates or lambda expressions. Doesn’t this make local functions redundant? Not at all, anonymous functions and lambda expressions have certain restrictions that local functions have not.

Here is a list of things a local function can do that lambda’s can’t:

  • Local functions can be called without converting them to a delegate

  • Local functions can be recursive

  • Local functions can be iterators

  • Local functions can be generic

  • Local functions have strictly more precise definite assignment rules

  • In certain cases, local functions do not need to allocate memory on the heap

More information can be found at:

Friday, October 27, 2017

Angular: Cancel a pending HTTP request

In case you are wondering how to cancel a pending HTTP request, here is the (simple) answer.  You can do this by calling unsubscribe on the Subscription object returned by the  subscribe method.

An example:

image

Thursday, October 26, 2017

Angular aot build error–No template specified for component

A colleague sent me the following screenshot with an error he got after switching to an AOT build in Angular:

clip_image002

Here is the related TypeScript file for this component:

The problem was caused by the “template: require('./perceel-list.component.html')” statement in the component file. The aot build doesn’t like it when you try to resolve html templates dynamically.

Removing the require and just using the templateUrl instead solved the problem:

Wednesday, October 25, 2017

Angular CLI– ng build --prod

Did you know that you can pass a “--prod” parameter when executing compiling your Angular code using “ng build”?

The "--prod” option also has a development counterpart “--dev”. They will set the following list of parameters:

Flag --dev --prod
--aot false true
--environment dev prod
--output-hashing media all
--sourcemaps true false
--extract-css false true
--named-chunks true false

More information: https://github.com/angular/angular-cli/wiki/build

Tuesday, October 24, 2017

Swagger–Expose enums as strings in your Web API

By default Swagger exposes enums in your API definitions as numbers which makes it not easy to understand what a specific parameter value means.

image

You can configure Swagger to expose enums using string names instead. Therefore add the following line to your Swagger configuration:

 c.DescribeAllEnumsAsStrings();

image

Monday, October 23, 2017

Send extra arguments to npm script in package.json

In our package.json we defined some script commands to automate certain actions.

However sometimes we want to add extra parameters to the script when executing it. This is possible by adding an extra pair of dashes  and the extra parameter when executing the command:

ngbuild -- --environment=local

Friday, October 20, 2017

.NET Conf 2017

In case you missed .NET Conf 2017, all the videos are available online on Channel 9.

image

Thursday, October 19, 2017

SQL Server Full Text Search–Wildcards

The SQL Server Full Text Search option is really powerful. However you need to be aware that by default a search is always done on a full word. For example if you had indexed ‘the quick brown fox jumps over the lazy dog’ and you search for ‘brow’ you don’t get a result back.

To solve this you can use wildcards, but you have to be aware that you put the full search term between quotes.

This query will not work:

SELECT BookID,BookTitle

FROM Books

WHERE CONTAINS(BookTitle,'brow*')

But this query will:

SELECT BookID,BookTitle

FROM Books

WHERE CONTAINS(BookTitle,'"brow*"')

Wednesday, October 18, 2017

Angular i18n issue - Cannot read property 'toLowerCase' of null

After following the steps in the Angular documentation to setup internationalization(i18n) support, I tried to execute my brand new i18n npm command:

PS C:\Projects\test\AngularLocalization\angularlocal> npm run i18n

> angularlocal@0.0.0 i18n C:\Projects\test\AngularLocalization\angularlocal

> ng-xi18n

TypeError: Cannot read property 'toLowerCase' of null

    at Extractor.serialize (C:\Projects\test\AngularLocalization\angularlocal\node_modules\@an

gular\compiler-cli\src\extractor.js:47:32)

    at C:\Projects\test\AngularLocalization\angularlocal\node_modules\@angular\compiler-cli\sr

c\extractor.js:33:33

    at process._tickCallback (internal/process/next_tick.js:109:7)

    at Module.runMain (module.js:606:11)

at run (bootstrap_node.js:389:7)

    at startup (bootstrap_node.js:149:9)

    at bootstrap_node.js:502:3

Extraction failed

npm ERR! Windows_NT 10.0.15063

npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\

npm\\bin\\npm-cli.js" "run" "i18n"

npm ERR! node v6.11.3

npm ERR! npm  v3.10.10

npm ERR! code ELIFECYCLE

npm ERR! angularlocal@0.0.0 i18n: `ng-xi18n`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the angularlocal@0.0.0 i18n script 'ng-xi18n'.

npm ERR! Make sure you have the latest version of node.js and npm installed.

npm ERR! If you do, this is most likely a problem with the angularlocal package,

npm ERR! not with npm itself.

npm ERR! Tell the author that this fails on your system:

npm ERR!     ng-xi18n

npm ERR! You can get information on how to open an issue for this project with:

npm ERR!     npm bugs angularlocal

npm ERR! Or if that isn't available, you can get their info via:

npm ERR!     npm owner ls angularlocal

npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

npm ERR!     C:\Projects\test\AngularLocalization\angularlocal\npm-debug.log

Whoops! This was not the output I was hoping for…

Strange! Because it worked perfectly before Confused smile. A search through the issues on GitHub brought me to the following issue: https://github.com/angular/angular/issues/16235

The issue seems to have appeared in Angular 4.0.3. Luckily a workaround exists, I altered the commando in my package.json to include the prefered format:

image

When I invoked the i18n command again, this time it worked without a problem.

Tuesday, October 17, 2017

Impress your colleagues with your knowledge about…Expression Evaluator Format Specifiers

Sometimes when working with C# you discover some hidden gems. Some of them very useful, other ones a little bit harder to find a good way to benefit from their functionality. One of those hidden gems that I discovered some days ago are Expression Evaluator Format Specifiers.

What is it?

Expression Evaluator Format Specifies come into the picture when you are debugging in Visual Studio. The part of the debugger that processes the language being debugged is known as the expression evaluator (EE). A different expression evaluator is used for each language, though a default is selected if the language cannot be determined.

A format specifier, in the debugger, is a special syntax to tell the EE how to interpret the expression being examined. You can read about all of the format specifiers in the documentation.

One of really useful format specifiers is the ‘ac’ (always calculate) format specifier. This format specifier will force evaluation of the expression on every step. This is useful during debugging when you want to track a specific value.

How to use it?

  • Start a debugging session in your application.

image

  • Go to the Watch window(Debug –> Windows –> Watch –> Watch 1)

image

  • Write the expression that you want to check, a comma and the format specifier; {expression},{format specifier}

image

  • If you use the ac format specifier you don’t have to refresh your expression but will it be evaluated on every step:

image

image

Monday, October 16, 2017

Seeing the power of types

Most applications I’ve seen don’t take advantage of the power of the type system and fall back to primitive types like string, int, … .

But what if you start using the type system to design a more understandable and less buggy application?

You don’t believe it is possible? Have a look at the Designing with Types blog series, it will change the way you write your code forever…

The complete list of posts:

1. Designing with types: Introduction

Making design more transparent and improving correctness

2. Designing with types: Single case union types

Adding meaning to primitive types

3. Designing with types: Making illegal states unrepresentable

Encoding business logic in types

4. Designing with types: Discovering new concepts

Gaining deeper insight into the domain

5. Designing with types: Making state explicit

Using state machines to ensure correctness

6. Designing with types: Constrained strings

Adding more semantic information to a primitive type

7. Designing with types: Non-string types

Working with integers and dates safely

8. Designing with types: Conclusion

A before and after comparison

Friday, October 13, 2017

Angular: Analyze your webpack bundles

To optimize your application it can be useful to investigate all the things that are loaded and used inside your webpack bundles. A great tool to visualize this information is the webpack dependency analyzer: https://www.npmjs.com/package/webpack-bundle-analyzer

From the documentation:

The Webpack dependency analyzer is a Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

webpack bundle analyzer zoomable treemap

This module will help you:

  1. Realize what's really inside your bundle
  2. Find out what modules make up the most of it's size
  3. Find modules that got there by mistake
  4. Optimize it!

How to use it inside your Angular app?

  • Install the bundle through npm:
    • npm install webpack-bundle-analyzer
  • Update your package.json with an extra command:
    • "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
  • Invoke the command through npm
    • npm run analyze
  • A browser window is loaded at http://127.0.0.1:8888/

Thursday, October 12, 2017

IIS Server configs

If you are hosting your ASP.NET applications inside IIS I have a great tip for you: https://github.com/h5bp/server-configs-iis

This GitHub project contains a list of boilerplate web.config files applying some best practices(like security hardening) and taking maximal advantage of the powerfull functionality that IIS has to offer.

It shows and explains how to:

  • Apply security through obscurity by not exposing specific information through the headers
  • Apply GZIP compression on static content
  • Disable tracing
  • Secure your cookies
  • Cache static content
  • Support cache busting

Wednesday, October 11, 2017

ASP.NET Core–Environment variables

ASP.NET Core references a particular environment variable, ASPNETCORE_ENVIRONMENT to describe the environment the application is currently running in. This variable can be set to any value you like, but 3 values are used by convention: Development, Staging, and Production.

Based on this information the ASP.NET Core configuration system can load specific configuration settings (through .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true) )
or execute a specific Startup class or Startup method through the Startup conventions(e.g. a Startup{EnvironmentName} class or a Configure{EnvironmentName}() method inside the Startup class).

At one customer we are hosting our ASP.NET Core applications inside IIS. The IIS environment is used both for development and testing. So we want to host the same application twice with a different environment setting. By default the environment setting is loaded from a system level environment variable which of course can be set to only one value.

How can we solve this?

To support this scenario the ASP.NET Core Module inside your web.config allows you specify environment variables for the process specified in the processPath attribute by specifying them in one or more environmentVariable child elements of an environmentVariables collection element under the aspNetCore element. Environment variables set in this section take precedence over system environment variables for the process.

An example:

Tuesday, October 10, 2017

ASP.NET Core 2.0–Authentication Middleware changes

ASP.NET Core 2.0 introduces a new model for authentication which requires some changes when upgrading your existing ASP.NET Core 1.x applications to 2.0.

In ASP.NET Core 1.x, every auth scheme had its own middleware, and startup looked something like this:

In ASP.NET Core 2.0, there is now only a single Authentication middleware, and each authentication scheme is registered during ConfigureServices() instead of during Configure():

More information: https://docs.microsoft.com/en-us/aspnet/core/migration/1x-to-2x/identity-2x

Monday, October 9, 2017

Angular 4.3: HTTP Interceptors are back

With the introduction of a new HttpClient in Angular 4.3, an old feature of Angular.js was re-introduced; HttpInterceptors. Interceptors are sitting between the application and the backend and allow you to transform a request coming from the application before it is actually submitted to the backend. And of course you when a response arrivers from the backend an interceptor can transform it before delivering it to your application logic.

This allows us to simplify the interaction with the backend in our Angular app and hide most of the shared logic inside an interceptor.

Let’s create a simple example that injects an OAuth token in our requests:

To be able to use the interceptor, you’ll have to register it: