Going through the process of getting Visual Studio 2017 installed on all my machines has been pretty smooth. The new installer works great and makes it much clearer what needs to be installed.
The one issue I have had, which was only an issue on one install, is an error when trying to clone a repo from GitHub. I say GitHub but really it would be a problem with any Git repo. The following is the error I was getting.
Error encountered while cloning the remote repository: Git failed with a fatal error.
After searching I found a lot of things to try. I uninstalled and reinstalled Git for Windows multiple times using both the Visual Studio Installer and the stand alone installer. I finally stumbled onto this forum thread which had a solution that worked for me. The following is a quote of the reason for the issue and a fix posted by J Wyman who is a software engineer for Microsoft’s Developer Division.
After intensive investigation we were able to determine that Git was accidentally loading an incorrect version of libeay32.dll and ssleay32.dll due to library loading search order and precedence rules. Multiple users have confirmed that copying the binaries from the “<VS_INSTALL>\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin\” folder to the “<VS_INSTALL>\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\libexec\git-core\” folder completely resolved the issue for him.
Any other users seeing similar problem should attempt the same solution.
I hope this gets other people up and running as it did me. My only worry about this fix is what happens with Git gets updated.
On March 7th Visual Studio 2017 was released bring the ASP.NET Core tools preview. ASP.NET Core 1.1.1 was also released. This post is going to cover converting the project from my MailGun post from being project.json based to csproj as well as migrating from the project from ASP.NET Core 1.0.2 to 1.1.1. Here is the project as it stood before I made any changes.
Visual Studio 2017
The first step is to get a version of Visual Studio 2017 (VS 2017) installed. The download page can be found here. Make sure to grab the community edition if you are looking for a free fully-featured IDE option. Check out this blog post from Microsoft on the many new features Visual Studio 2017 brings.
The installer for VS 2017 has changed a lot from previous versions. The way it works now is you select the workload you use and it only installs the bit it has to to keep the size of install down. The following is a screen shot from my install. I have a lot more workloads checked that is needed for just an ASP.NET Core application. At a minimum make sure the “ASP.NET and web development” workload gets installed. If you are interested in cross-platform development scroll to the bottom and also check “.NET Core cross-platform development”.
When you open the solution in VS 2017 it will prompt you to do a one-way upgrade.
After the conversion is complete a migration report will open. Below is mine. I had no issues, but if there were any this report should give you some idea of how they should be addressed.
As part of the conversion process, the following file changes happened.
After all the changes above your solution will be on the latest released bits. Having been following releases since beta 4 I can tell you this is one of the easiest migration so far. I may be partial, but .NET and Microsoft seem to be getting better and better over the last couple of years.
The project got created and would build with no issues, but when I tried to run it I got the following error.
Call to Node module failed with error: Error: Cannot find module ‘./wwwroot/dist/vendor-manifest.json’
webpack --config webpack.config.vendor.js
After running that command everything worked like a charm! It is worth noting that the command above can be found in project.json in the scriptsprepublish section. From the little bit of reading I did it looks like this command should be rerun anytime a new vendor dependency is added.
This was going to be the fist in a series of posts covering getting started using the RTM versions of ASP.NET Core and Angular 2 together which was going to follow a similar path as the series on Aurelia and ASP.NET Core the first entry of which can be found here.
In the process of writing this post I was reminded of JavaScripServices (they recently added Aurelia support!) and will be using it to get this project up and running instead of doing the work manually.
The code found here can be used as a starting point. The repo contains a solutions with an ASP.NET Core API (Contacts) project and a MCV 6 (Aurelia) project. This post will be add a new MVC 6 project for Angular 2.
First step is to install the Yeomen generator via npm using the following command from a command prompt.
npm install -g yo generator-aspnetcore-spa
When installation is complete create a new directory call Angular for the project. In the context of the repo linked above this new directory would be in Contact/src at the same level as the Aurelia and Contacts folders.
Open a command prompt and navigate to the newly created directory and run the following command to kick off the generation process.
This will present you will a list of frameworks to choose from. We are going with Angular 2, but Aurelia, Knockout, React and React with Redux are also available.
Hit enter and it will ask for a project name which gets defaulted to the directory name so just hit enter again unless you want to use a different name. This kicks off the project creation which will take a couple of minutes to complete.
Add new project to existing solution
To include the new Angular project in an existing solution right click on the src folder in the Solution Explorer and select Add > Existing Project.
This shows the open file dialog. Navigate to the directory for the new Angular project and select the Angular project file.
I will be using my normal ASP.NET Basics solution for this upgrade. The examples will be out of the Contacts project. This post is coming out of order so the repo that goes with this post will contain some items not covered in posts yet. The starting point of the repo can be found here.
Make sure you already have Visual Studio 2015 Update 3 installed with .NET Core 1.0.1 tools Preview 2 installed. If not use the previous links to install the needed versions. Next head over to the download page for .NET Core and under All downloads and select Current and SDK and select the download for your OS.
Another option is to install Visual Studio 2017 RC which can be found here.
Project.json is the file that contains all the versions of assembles used by the application. A couple of items need to edited by hand and the rest can be updated using NuGet UI or you can change them all by hand if you like.
First the by hand items. The platform version needs to be updated to 1.1.
Make note that using the NuGet UI will update the dependencies but not the tools section. For some reason the tools section doesn’t seem to have intellisense so I ended up searching the NuGet site to find the new versions. If you do end up changing the tooling version I recommend doing a dotnet restore in the project directory from the command prompt to ensure the proper versions get downloaded.
As I said this was a really pain less migration. Make sure you check out the release pages ( .NET Core 1.1, ASP.NET Core 1.1 and Entity Framework 1.1) for the details on what has changed. For example ASP.NET Core has gotten significant performance increases with this release as well as URL Rewriting Middleware and Response Caching Middleware.
It has been less than six months since the initial release of ASP.NET Core until the 1.1 release which a huge increase in the pace of releases compared regular ASP.NET. From what I have see this is a pace the team will continue. Check out the roadmap for a preview of things coming in 1.2.
At times I will make some quick changes to a project in Visual Studio to try something out knowing that I will undo the changes when done. Most of the time this works great with no problems, but a few times I am unable to get Visual Studio to undo the changes. Fist I am going to review the steps I normally use to undo and then I will cover the steps I use when files refuse to be undone. Just to be clear I am using Git base source control.
Normal undo changes
Normally when I am ready to undo a set of changes I open the Team Explorer window and select Changes from the drop down at the top of the window. Next I right click on the file, files, or directory I want to undo changes on and click Undo Changes.
This show a message box asking for confirmation before undoing the changes. Click Yes to undo the changes.
If all goes well the select files and/or directory will have reverted and no longer have any changes.
Undo failed now what?
If you undo didn’t clear the changes as expected now what? Well the best answer I have found is to open a command prompt and navigating to the directory that contains the file that needs to be undone and then run the following command. In this example the changes to gulpfile.babel.js will be undone. This will work for both added and changed files.
git checkout gulpfile.babel.js
If you want to undo all the changes in a branch it takes a couple of commands. This first command will remove all changes to tracked files including staged files.
git reset --hard
Next if you have any files that were added (or not already tracked by Git) the following command will remove them.
git clean -f
Your repo will be back to its starting state as if it had just been cloned.
When using the above commands be careful as any changes will be gone and Git will have no record of them. For added files the file will be removed and again Git will have no record of the file. This mean these operations are permanent and should be used with a great deal of caution.
In last week’s post I covered creating a new ASP.NET Core project and then adding in Aurelia. The Aurelia application did nothing except output hello world. This week I am going to take an existing contacts API and the Aurelia project from last week use them together to make the Aurelia application display the name of the contacts from the API.
When you download a copy of the repo you will find an ASP.NET Core solution that contains two projects. The Aurelia project, obviously, contains the Aurelia application.
The Contacts project has a bit more going on. It has a set of razor views and a controllers to go with them that support standard CRUD operations, which at the moment is the best way to get contact information in the database. It also contains the ContactsApiController which will be the controller used to feed contacts to the Aurelia application.
Multiple startup projects in Visual Studio
In order to test this application both the Contacts and Aurelia projects to startup when the solution is run. Visual Studio provides an easy way to accomplish this. In the Solution Explorer window right click on the Solution and click Set StartUp Projects.
This will launch the Solution Property Pages dialog. Looks for the Startup Project page under Common Properties.
Match the screenshot above by selecting the radio button for Multiple startup projects. Then using the arrows on the right to make sure that Contacts project will start first. Also set the Action on Contacts to be start without debugging since that project will just be feeding data and won’t need to be debugged at the moment.
Then on the Aurelia project set the Action to Start. Click OK and now both projects will start up when solution is run from Visual Studio.
Accessing Data from the API
In order to get data from the API we will need away to talk HTTP from Aurelia. Aurelia provides two libraries that provide this functionality which you can read about here. For this post I will be using Aurelia’s fetch client which based on the experimental Fetch API. The Fetch API isn’t supported by all browsers at point so if you need it there a polyfill can be found here.
Installing the Aurelia Fetch Client
If you started with the project from GitHub repo linked about then the fetch client will already be included in the projects dependencies, but if not I wanted to cover getting it installed. Using a command prompt run the following npm command in the project’s directory.
npm install aurelia-fetch-client -save
Alternately add the following line to the dependencies section of the project’s package.json file and when the file is saved Visual Studio will automatically restore the new package.
The last step to making sure the fetch client available in the client application is to make sure it is included in the vendor-bundle.js that is created by the Aurelia CLI’s build process. To do this open the aurelia.json file found in the aurelia_project folder. In the bundles section look for the bundle named vendor-bundle.js and in its dependencies section add “aurelia-fetch-client”. The following an abbreviated example from my file to to make it clear where the new line should go.
It is important to not spread HTTP across the whole application and in order to achieve this goal it is a good idea to create a service that encapsulates the HTTP actions. For this example a contact service will be created that will handle all interactions with the ASP.NET Core API and the rest of the Aurelia application will just interact with the contact service.
To start create a services folder inside the src folder which contains the Aurelia client side application and added a new file to contain the new service called contactService.js.
The contact service will use the Aurelia fetch client to get all the contacts from the ASP.NET Core API. To do so it needs a constructor to allow injection and configuration of a HTTP client as well as a single function to get all the contacts. The following is the complete service.
At this point I used Visual Studio to launch both projects. In the Aurelia MVC application I navigated to http://localhost:37472/index.html which is the page that contains the Aurelia client application. Instead of being greeted by a list of contact names the application output “Hello World!”. That means that the Aurelia client application was running, but the contact service had failed for some reason. The console in the Chrome developer tools show the following error.
Fetch API cannot load http://localhost:13322/api/contactsApi/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:37472’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
The work around
Turns out that having two projects caused an issue I hadn’t considered. I now have to worry about cross-origin resource sharing. Not a topic that will be covered in this post. In order to work around this issues the Contacts project can be changed to added the following to the Configure function of the Startup class.
I am in no way saying that the above is the proper way to fix this issue. CORS is a subject I haven’t dug in to yet. The above is only meant to get this sample working. Please make sure to locate other resources on CORS for anything that is more than a demo.
Running at this point will return the names of contacts as expected. Future posts will expand this application more. I want to get Angular 2 up as a new project in this same solution. When this solution has projects that contains the basics for MVC/razor, Aurelia and Angular 2 it will be in a good replacement the ASP.NET SPAs comparison reference application. Having each type of front end in a different project should make it easier to follow how each is set up. The code for today’s post can be found here.
Updated version for Visual Studio 2017 can be found here.
Recently I needed to create a library that would be shared between an UWP application and a Winforms application. My first thought was to create a portable class library with a profile that covered .NET 4.5.1 and Windows 10 which actually works out to be Profile44. At some point I was reminded of the new .NET Standard Library and decided that would be a better option.
.NET Standard Library
The .NET Standard Library specifies what .NET APIs are available based on the version of the .NET Standard Library being implemented. The following is a comparison to portable class libraries that really helped me understand the difference. This was pulled form the .NET Standard Library link above.
.NET Standard Library can be thought of as the next generation of Portable Class Libraries (PCL). The .NET Standard Library improves on the experience of creating portable libraries by curating a standard BCL and establishing greater uniformity across .NET runtimes as a result. A library that targets the .NET Standard Library is a PCL or a “.NET Standard-based PCL”. Existing PCLs are “profile-based PCLs”.
The .NET Standard Library and PCL profiles were created for similar purposes but also differ in key ways.
Defines APIs that can be used for binary code sharing.
The .NET Standard Library is a curated set of APIs, while PCL profiles are defined by intersections of existing platforms.
The .NET Standard Library linearly versions, while PCL profiles do not.
PCL profiles represents Microsoft platforms while the .NET Standard Library is agnostic to platform.
.NET Standard Library Project Type?
Since I need to use my library in a winforms and UWP applications I need to create a csproj based library and not a xproj based library. This part of the process that took me the longest to figure out. Thankfully this Stack Overflow post helped clear up what is required. Basically if any of your projects need to use msbulid (which both winforms and UWP do) then your library should be csproj based.
Create a Portable Class Library
For csproj based .NET Standard library we must start with a Portable Class Library project type. To start click File > New Project which shows the New Project dialog.
Locate the Class Library (Portable) type of project. Here I am using the C# version. Click OK. Next the Add Portable Class Library dialog will be shown.
Since this well be converted to use .NET Standard your selections don’t mean much here, but you will have to keep your target platforms when selecting which version of the .NET Standard your library will support. Click OK and the project will be created.
Convert a Portable Class Library to .NET Standard
Right click on your project and select properties. Alternately select the project in Solution Explorer and use the Project > [Project Name] Properties menu.
In project properties on the Library tab there is a link for Target .NET Platform Standard in the Targets section just below the Change button. Click the link.This will show a warning message about saving changes and that the available APIs could change. Click yes to continue.
This will return you back to the library page of the project’s properties with the PCL related options replaced with a drop down used to select the version of the .NET Standard you want your library to target. I am going with version 1.2 based on where I need my library to run. Use the .NET Platform Support section of this page to help you decided on the proper version of the .NET Standard for your library.
Save the project and it will now produce a .NET Standard library when built!
It is hidden by default, but if you show all file you will see that the project now contains a project.json file which means the project can be used by the .NET CLI. Open a command prompt in the project directory. The following command can be used to build the project.
Or if you would like to create a Nuget package you can use the following.
Inspecting the resulting dll in dotPeek
Just out of curiosity I wanted to see what showed when I opened up my .NET Standard library using a decompiler. I used dotPeek which is a free .NET decompiler created by JetBrains the company behind ReSharper.
As you can see in the following screenshot the platform shows as .Net Framework v4.6.1.
Now here is a screenshot of the same library on a computer with an older version of .NET and it show a platform of .Net Framework v4.0.
For some reason I was surprised by the fact the platform changed, but when I thought about it more I realized how else could it work because the library isn’t build to a specific platform. Seeing the platform change for the same library between two different machines really solidified how awesome the .NET Standard is.
As I said before I was hoping to use a .NET Standard library between a winform and UWP application. I did all the thing above and things were looking great. I added a project reference to my UWP application in Visual Studio 2015 with no trouble. Unfortunately the winforms application is stuck on Visual Studio 2013 (due to performance issue, 2015 is painfully slow with this solution) and Visual Studio 2013 doesn’t support this project type making a project reference impossible.
I could have gotten the library to work by adding it to the winforms solution as a Nuget reference, but for this project that was not a viable solution.
I have started to play with the release version of Aurelia. My current goal is to see what it takes to get going with Aurelia and ASP.NET Core now that both are RTM. I have hit a couple of road blocks that have ended up being new post of their own. For example this post that covers converting a new ASP.NET Core application to use gulp is one example. Today’s post is going to cover another issue I hit trying to use the gulp tasks created by the Aurelia CLI. There will not be anything Aurelia related in this post that will another post at a later date.
My gulpfile.js is nothing but a reference a directory of tasks. The full file looks like the following.
Then I have a single task in tasks/exampleTask.js that consists of the following.
import gulp from 'gulp';
With the above in place if you look at the task runner explorer you will see that Gulpfile.js shows a failed to load error instead of the helloGulp task.
As suggested by task runner explorer open the output window. There are many different things that use the output window so be sure and change show output from option to Task Runner Explorer. With that done you will be able to see why the task failed to load. The following is the error I am getting.
Failed to run "C:\ProjectDirectory\Gulpfile.js"...
cmd.exe /c gulp --tasks-simple
import gulp from 'gulp';
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:528:28)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at requireDir (C:\ProjectDirectory\node_modules\require-dir\index.js:116:33)
at Object.<anonymous> (C:\ProjectDirectory\gulpfile.js:1:85)
I did some googling and I found this post by Mark Goodyear on using ES6 (or ES 2015) with gulp. It turns out the tasks generated by the Aurelia CLI are using ES 2015 and in order to use ES 2015 with gulp there are a few steps that must be taken first. Mark does a great job explaining those steps, but I am going to include a summary from the Visual Studio perspective.
Verify the devDependencies section in package.json contains the following. require-dir is only required if your gulpfile or tasks are using it.
When ASP.NET Core 1.0 was released Microsoft switched gulp for Mads Kristensen‘s Bundler & Minifier. This post is going to cover taking a project that is using Bundler & Minifier and change it to use gulp instead. Don’t take this as problem with Bundler & Minifier I am just more familiar with gulp and didn’t mix in another new tool.
There is a Bundler & Minifier extension available that make the change to gulp super simple. You could do all this yourself, but the extension seems to be the fastest way to convert without having to worry about htting. Click the Tools > Extensions and Updates menu. Then in the Extensions and Update dialog on the left select Online. Next on the top right enter “bundler & minifier” in the search box. Then click the download button next to Bundler & Minifier and follow the prompt to install and then restart Visual Studio.
The conversion to gulp
Right click on your project’s bundleconfig.json (this is the file that is used to configure the default bundling and minification stuff) and select Bundler & Minifier > Convet To Gulp.
This will show a warning dialog saying that the process will take a few minutes due to npm restores, etc. When the process is done you will now have a gulpfile.js file. The gulpfile.js file that is created will require bundleconfig.js in order to expose your existing tasks.
Required edit to bundleconfig.js
Since the generated gulpfile.js is using the existing tasks in bundleconfig.js all the comments must be removed from bundleconfig.js before gulp will work properly. This is due to comments not being valid json and the parser that gulp uses sees the json as being invalid. The following line exists in the generated gulpfile.js, but it is easy to miss so I wanted to call it out.
bundleconfig = require("./bundleconfig.json"); // make sure bundleconfig.json doesn't contain any comments
package.json is the other file that got created during this process. If you are doing this manually don’t forget this file. I had tried this conversion manually once before and I am pretty sure this file is the reason I was not successful.
As I stated above I went the route of the extension so I wouldn’t miss anything and it worked out well. Now knowing what needs to be changed I could do it manually, but the extension works so well I recommend using it.