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.