Thursday, April 27, 2017

Angular – Component Libraries

The new Angular(can’t call it Angular 2 anymore) ecosystem is still evolving. Control libraries start to appear.

Here are some of the libraries I had a look at:

(Don’t ask me which one I prefer, as with all control libraries they have their pros and cons you’ll have to learn to live with…)

Angular Material

Material Design components for Angular apps https://material.angular.io/

Remark: The Angular Material library for Angular >=2 is still rather limited. Don’t confuse it with the Angular 1 variant at https://material.angularjs.org/latest/.

image.

NG-Lightning

Native Angular components & directives for Lightning Design System http://ng-lightning.github.io/ng-lightning/#/

Created by the Salesforce’s guys on top of Angular and Salesforce's Lightning Design System.

image

TERADATA Covalent

Covalent(https://teradata.github.io/covalent/#/) is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).

image

PrimeNG

PrimeNG(https://www.primefaces.org/primeng/) is a collection of rich UI components for Angular 2. PrimeNG is a sibling of the popular JavaServer Faces Component Suite, PrimeFaces.

image

Kendo Angular UI

Professional Grade Angular UI Components http://www.telerik.com/kendo-angular-ui/

image

Wednesday, April 26, 2017

IT Manager, it’s a monkey job…

In my current job I’m active as a manager where I have a team of +20 people. My main focus is to guide these people through their career and help them grow into professional IT consultants. Sometimes I get completely overwhelmed by the questions, problems,little and bigger things, … that people keep asking me.

My manager(the manager’s manager Winking smile) noticed it and shared the following article from Harvard Business Review with me; Management time: Who’s got the monkey?. Although from 1974(!) still as relevant today…

image

Don’t forget the follow up article Making time for Gorillas(part of the same link).

Thanks J├Ârgen for the tip! And now I have to go as it is time to get the monkeys of my back…

Tuesday, April 25, 2017

Add extra NuGet Repositories through nuget.config

By default Visual Studio has one NuGet source registered out of the box, the official NuGet gallery at https://www.nuget.org/.

However I had to use a package that wasn’t hosted on the official NuGet gallery but instead could be found on MyGet.org(https://www.myget.org/). Problem was that I didn’t want to ask all developers to register an extra Package Source in Visual Studio.

So what’s the alternative?

The trick is to add a nuget.config file to your solution.

From the documentation:

The behavior of every NuGet command, whether issued from the command line, the Package Manager UI, or the Package Manager Console, is driven by the accumulated settings from any number of NuGet.Config files:+

  • Project-specific NuGet.Config files located in any folder from the solution folder up to the drive root. These allow control over settings as they apply to a project or a group of projects.
  • A solution-specific NuGet.Config file located within a .nuget folder in the solution. Settings in this file apply only to solution-wide packages and is supported only in NuGet 3.3 and earlier. It is ignored for NuGet 3.4 and later.
  • The global config file located in %APPDATA%\NuGet\NuGet.Config, which is always used unless you specify a different config file using the -configFile switch on any NuGet command

Inside this nuget.config you can register extra package sources:

Monday, April 24, 2017

Angular 2 Pipes– args are not arguments :-)

Today I lost some time investing an issue with Angular 2. I was creating an Angular pipe using Angular CLI. The code that was generated for me was the following:

Unfortunately I wrongfully assumed that the args keyword was refering to the arguments object we have in the JavaScript language. Turns out that this was a wrong assumption. Since Angular beta.16 the parameters are not passed as array to the transform() method anymore but instead as individual parameters:

{{ myData | translate:'arg1':'arg2' }}


export class TranslatePipe implements PipeTransform {   
  transform(value:any, arg1:any, arg2:any):any {
        ...
}

I would suggest to the Angular CLI team to change the name of the argument, because the args name causes confusion. Or is it just me?

Friday, April 21, 2017

Use Swagger-UI to test your Open API

In case your REST api exposes an Open API specification document, but you didn’t integrate Swagger UI to allow developers to browse and test your API, they can still use the Swagger-UI capabilities by directly browsing to http://petstore.swagger.io and put the url in the box at the top of the page. Alternatively, they can add the url of the service to the end with ?url= such as http://petstore.swagger.io?url=https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v2.0/json/api-with-examples.json.

image

Thursday, April 20, 2017

ASP.NET Core Web Deploy–XML Documentation files are not copied

After deploying our ASP.NET Core application using Web Deploy, we noticed a problem with our Swagger integration through SwashBuckle. Normally SwashBuckle can integrate documentation in your Swagger UI by extracting and reading the XML comments added to your code.

Problem was that when this XML isn’t copied Swashbuckle throws an exception making our whole API unavailable. Some research showed that the problem appeared after migrating from the project.json format back to csproj, after which the <DocumentationFile> was no longer automatically copied to the output folder during the build or publish process.

The solution I used was to add the following snippet to your csproj:

Wednesday, April 19, 2017

TFS Release error - WinRM cannot complete the operation.

After creating a release pipelin in Team Foundation Server, I got the following error during deployment: 
Connecting to remote server failed with the following error message : WinRM cannot complete the operation. Verify that the specified computer name is valid, that the computer is accessible over the network, and that a firewall exception for the WinRM service is enabled and allows access from this computer. By default, the WinRM firewall exception for public profiles limits access to remote computers within the same local subnet. For more information, see the about_Remote_Troubleshooting Help topic.
As the error mentions first thing to check if I can use WinRM to invoke Powershell remotely. Therefore login on the target server and execute the following command:
  • winrm quickconfig

image

  • I said yes to apply the suggested changes

image

And indeed, no exception was configured on the firewall to allow access from remote computers. The winrm quickconfig did all the work for me to fix the situation. Nice!

Tuesday, April 18, 2017

ASP.NET Core 1.1 –Error in Response Caching Middleware

After putting a first version of our ASP.NET Core application into acceptance, we got a strange bug back.

Sometimes after a cold start, users mentioned that the dropdown lists inside the application were empty. The application is using the Response Caching middleware to prevent having to fetch those lists over and over again from the database.

When looking at the server logs, we found the following error message:

exception": "System.ArgumentException: An item with the same key has already been added. Key: \r\n at System.ThrowHelper.ThrowAddingDuplicateWithKeyArgumentException(Object key)\r\n at System.Collections.Generic.Dictionary2.Insert(TKey key, TValue value, Boolean add)\r\n at System.Collections.Generic.Dictionary2.Add(TKey key, TValue value)\r\n at Microsoft.AspNetCore.Server.Kestrel.Internal.Http.FrameResponseHeaders.AddValueFast(String key, StringValues value)\r\n at Microsoft.AspNetCore.Server.Kestrel.Internal.Http.FrameHeaders.System.Collections.Generic.IDictionary<System.String,Microsoft.Extensions.Primitives.StringValues>.Add(String key, StringValues value)\r\n at Microsoft.AspNetCore.Server.Kestrel.Internal.Http.FrameHeaders.System.Collections.Generic.ICollection<System.Collections.Generic.KeyValuePair<System.String,Microsoft.Extensions.Primitives.StringValues>>.Add(KeyValuePair2 item)\r\n at Microsoft.AspNetCore.ResponseCaching.ResponseCachingMiddleware.d__10.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---\r\n at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)\r\n at System.Runtime.CompilerServices.TaskAwaiter1.GetResult()\r\n at Microsoft.AspNetCore.ResponseCaching.ResponseCachingMiddleware.d__11.MoveNext()\r\n--- End of stack trace from previous location where exception was thrown ---

Seems there is a bug in the Response Caching Middleware, the response caching middleware is causing an exception when it tries to add the same header. This is a bug that should be fixed in  the ASP.NET Core 1.1.1 patch.

Monday, April 17, 2017

Canvanizer

Last year our CEO gave a session about ‘Business Model You’, or how to create your personal business model canvas. I really liked the session and how it made you think about your strenghts, weaknesses and the value you create for your company and customers.

I’m still using this approach today. Last week I found Canvanizer, a free tool that simplifies the creation of a Business Model canvas.

image

Friday, April 14, 2017

Using the Visual Studio 2017 Offline Installer

Visual Studio 2017 offers a new installation experience with better modularity, a smaller footprint and quicker results.

As a consequence, you no longer have a big ISO file containing all possible components, instead you get a small exe and all other files are downloaded on the fly.

Visual Studio 2017 setup dialog

Works great unless you need to install Visual Studio when you don’t have Internet access. An offline installer can be created by following the steps as described here: https://docs.microsoft.com/en-us/visualstudio/install/create-an-offline-installation-of-visual-studio

Afterwards you can copy the generated offline installer(some executables and a large list of packages) to the location where you want to use it. What is really important is that you first install the provided certificates(they are in the Layout\Certificates folder). The certificates don’t have a password, so just keep clicking next until the installation completes. If you don’t install the certificates first, we noticed that the installer still tries to go online to download the packages.

Afterwords you can run the installation exe.

Thursday, April 13, 2017

Angular CLI–Include a static html file

While integrating OIDC into my Angular app, I had to add a separate authentication page(originally named auth.html). However after bundling and serving my application using ‘ng serve’ I noticed that I couldn’t reach my ‘auth.html’ file and I got an error message instead…

The solution was obvious, any extra files you want to include should be added to the assets section inside the angular-cli.json file:

Wednesday, April 12, 2017

Azure API Management–Mock your service

A nice addition to Azure API Management is the mock-response policy. It allows developers to call your API without invoking the real backend service.

Here are the steps involved to configure mocking from the Azure Portal:

  • Browse to the Azure Portal
  • Open an API Management instance.
  • Click on APIs.

image

  • Click on an API

image

  • Then, for the scope of either All operations or any particular operation, open the Inbound processing editor.

image

  • A new tab titled Mocking is now available.

image

  • Change the Mocking behavior to Static responses and choose a Response from the list

image

Tuesday, April 11, 2017

Visual Studio 2017–.editorconfig

Visual Studio 2017 adds support for .editorconfig files within projects to help developers define and maintain consistent coding styles between different editors and IDEs, which can be useful for large development teams looking to maintain a consistent style across their code base.

Teams can configure convention preferences and choose how they are enforced inside the editor (as suggestions, warnings, or errors). The rules apply to whatever files are in the directory that contains the EditorConfig file. If you have different conventions for different projects, you can define each project’s rules in different EditorConfig files if the projects are in separate directories.

More about the EditorConfig project: http://editorconfig.org/

Easiest way to get started is by installing Mads Kristensen's EditorConfig extension, which can be downloaded from the Visual Studio Marketplace and will provide full autocompletion, syntax highlighting, and much more.

Remark: You don’t need this extension but it makes editing the .editorconfig files so much easier

After installing the extension it is time to open Visual Studio and load a solution.

  • Right click on a project. Choose Add –> .editorconfig File

image

  • Thanks to the extension you’ll get autocompletion

image

If you do not wish to use an EditorConfig file or you want to configure rules that your team hasn’t explicitly set, go to Tools>Options>Text Edtior> [C#/Basic]>Code Style to configure your machine local settings.

image

More information: https://docs.microsoft.com/en-us/visualstudio/ide/create-portable-custom-editor-options

Monday, April 10, 2017

#MakeWhatsNext–A cry out for more diversity in IT

I find it really unfortunate how little diversity there remains in the IT world. An era ago there were more women in IT than today! Something has to change…

We all play a role to change this and education will be one of the key pillars. Time to support #makewhatsnext

Friday, April 7, 2017

Avoiding seagull architects

During one of my trips to work I was listening to a DotNetRocks episode with Mark Seemann(this one to be precise: http://dotnetrocks.com/?show=1418).

In this episode Mark mentioned a ‘seagull architect’:

A seagull architect swoops in, poops out a lot of powerpoints, then flies off to let others implement it, evolve it, and solve the real problems.

This term comes from a book called Behind Closed Doors – Secrets of Great Management, a book that I immediatelly added to my reading list. Smile

Cover image for Behind Closed Doors

Thursday, April 6, 2017

TFS 2017 - VS402642: Found a backup job running against Tfs_DefaultCollection database

Last week during a TFS upgrade we noticed that the upgrade for one of the collections failed with the following error message:

VS402642: Found a backup job running against Tfs_DefaultCollection database. Wait for the backup job to complete and then rerun the failed collection job from the Status tab

Before starting the upgrade the sys admins already configured the backup jobs which intervened with the upgrade that was going on.

We were first afraid that we had to restart the whole upgrade procedure but it turns out that the TFS upgrade procedure is a lot more robust. As we were able to upgrade all the other collections and the configuration database, we had a working Team Foundation server system available. Only this one collection was missing.

To fix it, we first disabled all configured jobs inside the SQL Server instance.

Next step is to rerun the upgrade procedure for this collection:

  • Log in on the Team Foundation Server application tier
  • Open the Team Foundation Administration Console
  • Click on the Team Project Collections tree item on the left

image

  • Click on the collection that has failed to upgrade from the list on the right. The State would normally show as ‘Offline’

image

  • Go to the Status tab

image

  • Select the upgrade job from the list(normally the one on top of the list) and click Rerun job.

image

Wednesday, April 5, 2017

Team Explorer is back

Visual Studio 2013 and before had a seperate installer for Team Explorer. This allowed non-developers to access Team Foundation Server and all it’s functionality without the need to install a Visual Studio version. In VS 2015, Microsoft did not release a standalone Team Explorer but pointed customers to the free Express SKUs and Community editions, which included Team Explorer functionality.

This week with the Visual Studio 2017 Update release, the standalone Team Explorer installer is back. This is a free download for non-developers who connect to Team Foundation Server or Visual Studio Team Services.

Remark: Note that you probably still need a CAL(client access license).

Tuesday, April 4, 2017

Manual install of the Java JRE

Today I had to install the Java JRE on a server to be able to use ElasticSearch. Unfortunately I couldn’t install any software that allowed me to extract and run the tar.gz file on the server.

Here is my workaround:

Download and extract

  • Start by downloading the Java 8 Server JRE.
  • Once downloaded, unzip the tar.gz file. You’ll get a tar file.
  • That tar file should be unzipped again. The output of this second unzip operation was a set of binaries and executables.
  • Copy these files over to a file share on the target server.

Installation

  • Create a folder C:\Program Files\Oracle Java Server on your server.
  • Browse to the content of the file share.  Go one level deeper e.g. jdk1.8.0_XX (where XX is the current update version) and copy this content to the new folder on your server.

Set JAVA_HOME environment variable

Finally we need to set an environment variable to point to our new Java installation:

  • Open the System Properties.
  • Click the Advanced tab and the Environment Variables button.
  • Click New... at the System Variables.
  • Use JAVA_HOME as the name of the variable and the path C:\Program Files\Oracle Java Server as the value.
  • Finish this job by clicking OK until your are back at the control panel.

That’s it!

Monday, April 3, 2017

Reporting Services 2014 upgrade error

After upgrading to SQL Server 2014, we encountered the following issue while configuring the Reporting Services:

When we tried to restore the Reporting Services Encryption key, it always failed. Inside the error logs we found the following information:

The version of the report server database is either in a format that is not valid, or it cannot be read. The found version is ‘163’. The expected version is ‘162’. (rsInvalidReportServerDatabase).

A quick search on the web brought us to the following post: https://blogs.msdn.microsoft.com/sql_server_team/upgrading-to-sql-2014-report-server-version-mismatch/

The problem can happen when you upgrade from a SQL 2012 SP2 server with CU5 or later, the database will have a higher version number than what SQL 2014 expects.

Luckily there was already a solution out there. I asked the server team to upgrade to SQL 2014 CU7 after which the issue was gone…

Friday, March 31, 2017

Azure–Assign a reserved (public) IP address to an existing Cloud Service

A customer asked me to assign a static IP address to an existing Cloud Service in Azure. It took me same time to figure out the exact procedure to do this. So here are the steps involved:

  • Open the Powershell console and install the Azure Powershell commandlets(if you didn’t had done this already)
    • Install-Module AzureRM
  • Now let’s first login to Azure
    • Add-AzureAccount
  • You can check if you are logged in succesfully
    • Get-AzureAccount
  • Let’s activate a specific subscription
    • Select-AzureSubscription
    • Specify the SubscriptionName
  • Now you can convert the assigned dynamic IP for your cloud service to a static reserved IP address
    • New-AzureReservedIP –ReservedIPName MyStaticIP –Location "West Europe" -ServiceName MyServiceName

Remark: Executing the last command can take a while, so don’t panic if nothing seems to happen…

Thursday, March 30, 2017

Docker error - Error response from daemon: manifest for :latest not found

When trying to download a docker image for Eureka using docker pull, I got the following error message:

docker pull netflixoss/eureka

Using default tag: latest

Error response from daemon: manifest for netflixoss/eureka:latest not found

It seems that by default a :latest tag is added to the command. When I checked the Docker Hub I noticed that the ‘latest’ tag didn’t exist:

image

I changed the command to explicitly include the tag:

docker pull netflixoss/eureka:1.3.1

That solved the problem…

Wednesday, March 29, 2017

Visual Studio 2017 Best Feature Ever!

Yesterday I discovered a great addition to Visual Studio 2017. When a NullReferenceException is thrown you not only get the familiar‘Object reference not set to an instance of an object’ error message, but you also get some information about which object exactly is null. Finally!

image

Note: Null reference analysis in managed code requires .NET version 4.6.2. Null analysis is currently not supported for Universal Windows Platform (UWP) and any other .NET Core applications. It is only available while debugging code that does not have any Just-In-Time (JIT) code optimizations.

Tuesday, March 28, 2017

Visual Studio 2017–.NET 4.6.2 is missing

After installing Visual Studio 2017, I noticed that .NET 4.6.2 was still missing from the version list. Strange! Especially because the .NET site mentions otherwise:

image

Luckily you can add it by installing the .NET Framework 4.6.2 Developer Pack from here

Once installed you will see .NET 4.6.2 added to the list of supported versions:

image

Monday, March 27, 2017

NPM–Exclude files from your package

By default NPM will include all files as part of your package. But how can you exclude certain files?

To support that scenario NPM has the concept of a .npmignore file similar to a .gitignore file(Note: in case there is no .npmignore file, but there is a .gitignore file, nom will ignore the files matched by the .gitignore file).

.npmignore files follow the same pattern rules as .gitignore files.

Additionally, everything in node_modules is ignored, except for bundled dependencies. npm automatically handles this for you, so don't bother adding node_modules to .npmignore.

The following paths and files are never ignored, so adding them to .npmignore is pointless:

  • package.json
  • README (and its variants)
  • CHANGELOG (and its variants)
  • LICENSE / LICENCE

Friday, March 24, 2017

Angular 4 is out!

Angular 4 is out! My first reaction was WHAT? Did I miss the release of Angular 3 somewhere? Turns out that they decided to skip a version to align with the Angular version 4 router(an announcement that I missed somehow).

The focus on this release is making Angular applications smaller and faster. I’ll start upgrading my projects this weekend.

Expect a follow-up post with my experiences soon…

PS: Here is the announcement on their blog: http://angularjs.blogspot.be/2017/03/angular-400-now-available.html

Thursday, March 23, 2017

TypeScript - TS2403 Subsequent variable declarations must have the same type. Variable 'module' must be of type 'NodeModule'

Got a TypeScript error when trying to get my Angular app up and running:

Error      TS2403  Subsequent variable declarations must have the same type.  Variable 'module' must be of type 'NodeModule', but here has type '{ id: string; }'.   TypeScript Virtual Projects               C:\projects\MyAngularClient\src\typings.d.ts               2             Active

To fix it, I had to comment out the module declaration typings.d.ts:

Wednesday, March 22, 2017

Eventsourcing - One table with 3 columns, that’s all you need to build any kind of application

If you are new to EventSourcing I can recommend the eBay Tech Talk in Berlin, Raimo Radczewski did a great introduction about EventSourcing and CQRS.

Best quote during the talk:

One table with three columns; with EventSourcing, that’s all you need to develop an e-commerce system, a CRM app, or any kind of application you can imagine.

Tuesday, March 21, 2017

NPM Package.json publishing configuration

When managing your package.json file there are 2 use cases that can impact how you configure it:

I don't want my package published at all. It's private.

To enable this set "private": true in your package.json. This will prevent it from being published at all.

If you try to accidently publish the package, you’ll get the following feedback:

C:\projects\test\npmtest>npm publish
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\BaWu\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "publish"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.5

npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <
https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\projects\test\npmtest\npm-debug.log

I only want my package to be published to an internal registry.

Add a "publishConfig":{"registry":"http://my-internal-registry.local"} section to your package.json to force it to be published only to your internal registry.

Invoking the ‘npm publish’ command will publish the package to the specified registry.

More information at http://browsenpm.org/package.json

Monday, March 20, 2017

ProGet: NPM connector returns no records

At a customer we are using ProGet as our internal package manager server. ProGet supports a lot of different package formats including NPM and NuGet. Thanks to the usage of connectors you can even link to other package sources like the official NuGet feed or the official NPM registry.

Unfortunately after creating an NPM feed and linking it to the official NPM registry(https://registry.npmjs.org) using a connector, the connector didn’t do anything and our feed remained empty.

Turns out that a scheduled task exists that indexes the Npm registry but it only runs once a week by default.

To find this scheduled task, go to your Proget site and click on the Administration icon image on the right

image

After logging in, go to Scheduled Tasks below System settings

image

In the list of Scheduled Tasks you should find the ‘FullNpmConnectorIndex’ task. You can invoke it immediatelly by clicking on the ‘Play’ button at the right.

image

Friday, March 17, 2017

Visual Studio 2017 Poster

The Microsoft team created a poster showing off some of their favorite parts of Visual Studio 2017. Time to get your A1 printer started and spice up your team room.

visualstudio2017_productlaunchposter-1

You can download the  PDF or check the web infographic version.

Thursday, March 16, 2017

Angular CLI - You have to be inside an angular-cli project in order to use the build command

After creating an Angular application using the following Angular CLI command;

ng new appname

You should open the newly created appname folder before invoking any other ng command. Otherwise you get the following error message:

You have to be inside an angular-cli project in order to use the <commandname> command

Unfortunately I got the same error after pulling an Angular project created by a colleague from our GIT repo. Although I was certainly in the correct folder, I saw the above error again Sad smile.

Turned out that the Angular project was created using a newer version of the Angular CLI. After updating to the latest version of the @angular/cli package the problem disappeared.

Remark: Here are the steps to correctly update Angular CLI: https://github.com/angular/angular-cli#updating-angular-cli

Wednesday, March 15, 2017

Angular CLI–Error running ng-xi18n

Angular CLI is a great tool to help you during your daily Angular 2 development work. One of the features that is integrated is an internationalization(i18n) component that extracts XLF (or XMB) files that can be translated and used inside your Angular app.

However first time I tried to to use the ng-xi18n tool, it failed with the following error message

Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AnimationDriver in C:/SampleApp/node_modules/@angular/platform-browser/src/dom/animation_driver.d.ts, resolving symbol BrowserTestingModule in C:/SampleApp/node_modules/@angular/platform-browser/testing/browser.d.ts, resolving symbol BrowserTestingModule in C:/SampleApp/node_modules/@angular/platform-browser/testing/browser.d.ts

    at simplifyInContext (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:25247:25)

    at StaticReflector.simplify (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:25259:15)

    at StaticReflector.annotations (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:24598:62)

    at NgModuleResolver.resolve (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:17265:84)

    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:17739:62)

    at CompileMetadataResolver.getNgModuleSummary (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:17695:54)

    at C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:17785:70

    at Array.forEach (native)

    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:17780:51)

    at addNgModule (C:\Users\User\AppData\Roaming\npm\node_modules\@angular\compiler\bundles\compiler.umd.js:24349:60)

Extraction failed

That’s a bummer Sad smile.

Luckily I found a solution that worked:

  • First I made a copy of the tsconfig.json file
  • Inside this copy I added an ‘exclude’ section to exclude the test.ts:
  • Next I invoked the ng-xi18n tool specifying the altered tsconfig.json as a parameter:

ng-xi18n –p “tsconfig.i18n.json”

Tuesday, March 14, 2017

Cost saving tip when using Azure VM’s

Azure VM’s when you keep them running can cost you a lot of money. So stopping your VM when it’s not in use is certainly a good idea. However you should be aware that there are 2 kinds of ‘stopped’ which are unfortunately not equal.

The first method to shutdown an Azure VM, when connecting for example through Remote Desktop, is to Shutdown the Operating System. In this scenario you go to the Power options within Windows and select Shutdown. This will stop the VM from running but will NOT deallocate hardware. So you will still be paying for the VM hardware allocation.

Note: On the Azure Portal, you’ll see that the VM status will be ‘Stopped’

The second method, and the better one, is to go into the Azure Portal and Stop the VM. This will not only shutdown the VM but also deallocated reserved resources. No further costs will be charged(with the exception of storage for your VM disks).

Note: On the Azure Portal, you’ll see that the VM status will be ‘Stopped(Deallocated)’

VMPowerState

If you want you can automate this using Azure Automation and a runbook: https://docs.microsoft.com/en-us/azure/automation/automation-solution-vm-management

Monday, March 13, 2017

Error when trying to run a Docker Windows container

I’m using Docker Linux container for some time but yesterday I had some extra time and decided to give the Docker Windows container a try.

I opened a command prompt and typed

docker run -it --rm microsoft/nanoserver powershell

Unfortunately I didn’t end with a working container. Instead I got the following output:

Unable to find image 'microsoft/nanoserver:latest' locally

latest: Pulling from microsoft/nanoserver

bce2fbc256ea: Downloading

3ac17e2e6106: Downloading

C:\Program Files\Docker\Docker\Resources\bin\docker.exe: unknown blob.

Turns out that you need to have Windows 10 Anniversary Edition (Professional or Enterprise) running on your physical computer. Sad smile

Time for a Windows Update…

Friday, March 10, 2017

.NET Core NuGet packages

I had an issue with some NuGet package where the localized resource DLL’s were not copied(more about this in another post). My first thought was that the resource DLL’s were not part of the NuGet package.

But as the NuGet package is a .NET Core package, the content is no longer downloaded to a Packages folder relative to your solution. Instead a global folder is used for all the packages on your system.

But what’s the location of this folder?

After a search on my file system I found all packages in the following location:

c:\Users\[UserName]\.nuget\packages

Angular CLI–Avoid CORS issues

By default when using ng-serve, webpack will serve your Angular 2 content from http://localhost:4200. However when your backend is hosted on a different URI(which probably is the case) you get CORS errors when you try to call your backend:

image

One solution is to configure CORS on your backend, but if you want to host your frontend code and the backend on the same URI in the end, I have an alternative for you…

Angular-CLI allows you to specify a proxy file. In this proxy file you can specify a URI pattern and webpack will proxy these requests to your backend.

Let’s see some code:

  • My Angular Component. To simplify the codebase I have put everything inside my component. A better way would be to embed the HTTP logic inside a service.
  • A proxy.config.json file. In this file I specify a URI pattern and the target URI.

To invoke the application we have to specify the proxy.config.json path when calling ng serve:

ng serve –proxy-config proxy.config.json

That’s it!

Thursday, March 9, 2017

Azure: Visualize your ARM templates

I’m currently working on setting up an Azure infrastructure using the ARM templates. Although Visual Studio has built-in support for ARM templates, it’s not always easy to configure them correctly and I had to spend a lot of time browsing through the Azure Quickstart templates at https://github.com/Azure/azure-quickstart-templates.

One great tool that helped me a lot was ARMViz. This tool allows you to visualize the resources in your ARM template and their dependencies:

image

If you click on a specific resource in the diagram you jump straight to the location in the template.json file. Nice!

Wednesday, March 8, 2017

TFS–Build fails after upgrading to TFS 2017

After upgrading to TFS 2017, some of our builds started to fail with the following error message:

System.Management.Automation.RuntimeException: Source path 'd:\b\3\_work\3\s\<Project>\bin\Release\*.*' does not exist.

The issue was caused by our Copy  Files Task as part of our build definition.

image

Turns out that the Source path can no longer contain wildcards(like *.*) but should point to a specific folder or file. After removing the wildcards everything worked as expected…

From the documentation:

image

Tuesday, March 7, 2017

Visual Studio 2017 Launch

Today is a big day for Visual Studio. The 2017 version will be released and this will not happen without some buzz.

image

From the launch site(https://launch.visualstudio.com/):

On March 7, watch our live stream with Julia Liuson, Brian Harry, Miguel de Icaza, and Scott Hanselman as they share the newest innovations in Visual Studio, .NET, Xamarin, Azure, and more. After the keynote, Microsoft engineers will lead interactive technical demo sessions to help you get the most out of Visual Studio 2017 and the rest of our tools and platform.

On March 8, we’ll help you get productive even faster by hosting a full day of live interactive trainings. Make sure to Save the Date for both days and sign up for the March 8 training now.

Monday, March 6, 2017

SQLException when enumerating through the ClaimsPrincipal.Claims

On a ASP.NET Web Application project we got a strange issue, when enumerating through the Claims collection of the ClaimsPrincipal we got a SQLException Confused smile!?

Strange thing is that there was no place in our code where we were using SQL Server. So where was this error message coming from?

Turned out that the ClaimsPrincipal in ASP.NET is linked to a RoleManager by default that uses SQL Server as the backing store behind the scenes. Once we tried to access the claims, the RoleManager was called who tried to access SQL Server.

To solve it, we removed the default RoleManager module from the ASP.NET configuration using following code:

  <modules>
     <remove name="RoleManager" />

Wednesday, March 1, 2017

The fallacy of code re-use

In software development too much focus remains on re-use. The following quote made me think about a blog post by Udi Dahan I readed years ago

Tuesday, February 28, 2017

Angular 2 - Binding a promise directly to a view using AsyncPipe

Angular 2 goes reactive all the way. This means that data you get back from the http service is exposed through an observable.

But how can you show the observable data on the screen? One option is to subscribe to the observable, extract the result, map it to a property on your component and databind to this property on your view. However there are better alternatives out there…

Probably the cleanest solution is the use of the AsyncPipe.

The main benefit to utilizing the async pipe is the performance optimization and one way data flow patterns that this feature can help enable.

Monday, February 27, 2017

Angular 2–HTTP POST is not triggered

Last week a colleague asked me for help because his HTTP POST method was not invoked inside his Angular 2 service.

Here is the code he was using:

this.http.post(this.apiUrl, JSON.stringify(user), this.getRequestOptions());
So why does this code doesn’t work? 

Reason is that the  post method of the Http class returns a cold observable. Cold observables only  are invoked when someone subscribes to it. They are kind of ‘lazy’. As we didn’t subscribe for the Observable results nothing happens.  Here is a fix:

this.http.post(this.apiUrl, JSON.stringify(user), this.getRequestOptions()).subscribe(r=> {});

More information about cold vs hot observables can be found here: https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339#.an6vzfics

Friday, February 24, 2017

ASP.NET Core: Load configuration subsection

ASP.NET Core has a lot of configuration options out of the box. One of the added possibilities is to store your configuration settings inside a JSON document.

Nice advantage of using a JSON document is that you can logically group the related configuration settings in separate sections inside your document:

To read values from a subsection, you specify the subsection name and the property name separated by a colon:

Thursday, February 23, 2017

Angular CLI–Error when invoking ng

After installing Angular CLI and trying to invoke it using the ng command it failed with the following error message:

Error while running script "C:\Users\root\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config\config.ts":
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.require.extensions..ts (C:\Users\root\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:30:14)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module._load (C:\Users\root\AppData\Roaming\npm\node_modules\angular-cli\lib\bootstrap-local.js:55:22)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\Users\root\AppData\Roaming\npm\node_modules\angular-cli\addon\ng2\models\config.ts:7:16)
    at Module._compile (module.js:409:26)
The error message itself didn’t help a lot. Luckily a colleague had the same issue before. He suggested that updating to the latest node.js version would probably solve the issue.
And indeed, an upgrade to Node 6.10(the latest LTS version on the moment of writing) solved the problem…

Wednesday, February 22, 2017

ASP.NET Core–Injecting dependencies in an MVC ActionFilter

ASP.NET Core out-of-the-box supports dependency injection on the action filter level. You have to use constructor injection to inject your dependencies in the actionfilter:

However now it is no longer possible to simply add the action filter as an attribute on top of your controller or action method. This is because attributes must have their constructor parameters supplied where they are applied. Instead you have to use one of the following attributes:

  • TypeFilterAttribute
  • ServiceFilterAttribute

The key difference is that TypeFilterAttribute will find and load the dependencies through DI, and inject them into your action filter.

The ServiceFilterAttribute on the other hand attempts to find the filter from the service collection. This means that you have to register your actionfilter first:

 

Tuesday, February 21, 2017

Help my ASP.NET Core API returns a 406 status code

Yesterday I got into trouble when invoking a specific REST API created in ASP.NET Core. Instead of getting some JSON data back from the server I got a 406 status code instead.

I had no clue what was causing the issue. Luckily a colleague helped me out. I made a dumb mistake.

I added the [Produces()] attribute to my Web API controller. However I accidently added an invalid content type:

[Produces("listvalues/json")] instead of [Produces("application/json")] Confused smile

Thanks Michael for solving the problem!

Monday, February 20, 2017

Exclude properties in your Swagger OpenAPI metadata

.NET (core) has OpenAPI support through Swashbuckle, a NuGet package that generates OpenAPI metadata based on your API controllers.

I was asked to manipulate the Swagger metadata to exclude a specific property from the document metadata.

I found 2 possible solutions to achieve this goal:

Option 1 – Add a JsonIgnore attribute on your object:

Option 2 – Create a SchemaFilter:

Don’t forget to register the filter in your Swagger configuration:

Friday, February 17, 2017

.NET Core compilation error: Missing compiler required member 'microsoft.csharp.runtimebinder.csharpargumentinfo.create'

After using the dynamic keyword in a .NET core test application, the project no longer compiled. Instead I got the following error message:

Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create'

The error message itself is not very helpful, but luckily the solution is easy. Just add a reference to Microsoft.CSharp.

Thursday, February 16, 2017

The hardest software problem–Naming things

The hardest problem in software development is naming things. Concepts like the ubiquitous language from DDD could help but still finding the “right” name is hard!

A good video about this topic is “How to Name Things: the solution to the hardest problem in programming” by Peter Hilton.

image

Wednesday, February 15, 2017

HTTP Security Headers

The HTTP protocol offers a lot of features to improve the security of your web app. If you have no clue what XSS, CSP, HSTS, HPKP,… means, than the following blog post is a must read: https://blog.appcanary.com/2017/http-security-headers.html

It walks through a whole list of security headers explaining the use case, reasons (not) to use it, and how to activate it on your HTTP server.

Tuesday, February 14, 2017

Site Reliability Engineering

Interested to learn how Google runs it production systems? You should be!

O’Reilly published a book created by some people of the SRE team at Google. In this book they explain how Google builds, deploys, monitor and maintain some of the largest software systems in the world.

image

Remark: You can read the book for free online; https://landing.google.com/sre/book/index.html

Monday, February 13, 2017

whatwebcando.today: What Web Platform features are available today

While following a session about PWA(Progressive Web Apps) by a colleague, he mentioned the following website: https://whatwebcando.today.

This site gives an overview of which Web Platform features are available inside your browser today and if certain HTML5 device oriented features are implemented in your browser.

image

Thanks Mathias for the tip!