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 align 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, hence 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, yo need to install the template with 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 the all 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, then 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 me the below result.
And, when I click on Fetch Movies link, it will produce me 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. Sample project can be opened in VS-2017 and it work 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
I hope, you would have liked this post. Thanks for joining me.
2,680 total views, 10 views today