Create ASP.NET Core WebSite with Angular (4.0 Version).

This post is just a reference point (collation of links to other great posts), to help folks who are new to the arena, looking for ways to develop a  Single Page Application (SPA) using ASP.NET Core Web Application with Angular (4.0) as the front end development framework.

These SPA templates use the JavaScript Services functionality to embed NodeJS within ASP.NET Core on the server, and compile the JavaScript applications server-side as part of the .NET build process.

The below are the list of options that one can leverage for creating a new ASP.NET Core based SPA application :

Option 1

If you are looking for a ready-to-develop SPA with all bells and whistles put together, then try the below template from Mark PiesZak.  It has all the required packages pre-configured and supports SEO optimization and by far the best template available for development with ASP.NET CORE + ANGULALR 4.0.  (If any one has a better template/link, please do share just so I can update the post accordingly)

https://github.com/MarkPieszak/aspnetcore-angular2-universal

Just download the code from git and follow the instructions on the site to get started!

Option 2

To leverage the Dotnet CLI (Command LIne Interface) and install the required SPA templates for creating an ASP.NET CORE based project with either Angular or React :

Install the Dotnet Core SDK from this link.  (You dont need to click the link if you have a version of Visual Studio 2017 installed on your machine)   Now, run the below command from a console window (this will install all latest SPA templates.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

You should now see all of the below templates installed on your system :

dotnetnewtemplates

Now execute the below command to create a new ASP.NET CORE with Angular based project (scaffolded based on the provided template name, which is angular in this case, but can also be substituted with React as needed in the command line)

dotnet new angular

 

Do note that the required NPM packages/modules would not be available in the project created by the above command, and will be downloaded once after its opened in visual studio (so its natural for the IDE to be non-responsive for some time as the total download could exceed 100 MB in size).

Option 3

If you are looking for a step-by-step instruction to put together you own template/structure (from scratch), then Levi Fuller, has a very nice article to explain the steps involved in creating one :

https://medium.com/@levifuller/building-an-angular-application-with-asp-net-core-in-visual-studio-2017-visualized-f4b163830eaa

Though it lacks certain features (as against Option 1), the article can certainly answer some key questions and help you better understand on how the ASP.NET CORE MVC engine (Routing mechanism) and the Angular Framework can get deployed as a single package and yet be able to work in harmony.

Conclusion

As of writing this blog all 3 options were working (along with all links etc.,) and its up to the individual to use any of the above to get started quickly for kicking off development of an ASP.NET CORE based SPA application.

163 total views, 1 views today

0 votes

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha *