In this section, I will talk about my new Yeoman generator. In this Yeoman Generator, I have published ASP.NET Core scaffolding template with Angular 2 and TypeScript. This will enable developers to get started with Single Page App (SPA) development quickly. One point to note here is, this template is aligned with new ASP.NET Core changes where it embraces .csproj system rather than .xproj.
Here is the NPM Site link: https://www.npmjs.com/package/generator-aspnetcore-angular-2. Here, also, you will find all the details about how to install the generator. You can also discover the same on Yeoman site as well. Obviously, these templates are completely node and yeoman driven, hence it is needless to say that these are per-requisites. With that being said, let’s go ahead and discover the same with sample installation. Since I have already installed Yeoman globally, there is no need to install that again. Hence, I started with step 2. Upon successful installation of generator, it will show some warning, but that’s ok, you can skip that.
Then, you need to install the template with the below shown command, either at the same location or some other location.
Once you run the same, it will start creating the required files as shown below:
Here, I will answer all the questions and then hit enter. Like in template selection, I will simply hit enter, as currently, I am keeping one template, in coming versions, will have more templates.
Once the same gets created successfully, it will look like:
Then, I need to traverse in the working directory where my proj files are sitting like shown below. Then, I need to say dotnet restore. This will restore all the dependencies from nuget feed.
Now, I will run the same using dotnet run and then I navigate to http://localhost:5000. This will produce the below result:
And, when I click on Fetch Movies link, it will produce the below page.
However, when I open the same in Visual Studio Code, it will look like:
As you can see, this is based on the new changes around ASP.NET Core. The sample project can be opened in VS-2017 and it works there as well.
Note: Run webpack – watch from command line to make changes and see changes live.
Generator Link: https://github.com/rahulsahay19/generator-aspnetcore-angular-2
