For an internal project at work using ASP.NET MVC/AngularJS we’ve decided to convert the existing code to ASP.NET Core using Angular(4).
So I’ve started my research and encountered two particular methods:
Angular Quickstart contains an Angular application which you can use to quickly start your new Single Page Application with. This app is basic as the documentation mentions and requires you to configure your app to make it production-ready.
dotnet command line tool
The dotnet command line tool is installed when you install Visual Studio 2017 including all ASP.NET CORE components. This tool allows you to download project templates which can be used to create a project.
For our project we decided to use the dotnet command line tool because this tool offers a lot of out-of-the-box solutions for setting up ASP.NET Core in combination with Angular and preparing the configuration for development and production.
To install the dotnet command line tool click here for more information.
I’ve installed the tool using the Visual Studio 2017 installation including ASP.NET Core packages.
I opened up “Command Prompt” on my Windows machine which has VS2017 installed and enter the following commands:
- mkdir MyProject
- cd MyProject
- dotnet new
- dotnet new –install microsoft.aspnetcore.spatemplates::*
- dotnet new angular
- npm install
- start MyProject.csproj
Once Visual Studio is loaded use F5 to start our application with debugging or CTRL+F5 without debugging
dotnet new – initializes the tool
dotnet new –install microsoft.aspnetcore.spatemplates::* – this will download the Single page Application templates available
dotnet new angular – this will create a new Single Page Application project based on the folder name
The created template structure includes the following elements:
- ClientApp – TypeScript files of the Angular app like modules and components
- Controllers – C# MVC Controllers
- node_modules – contains the installed npm libraries included from package.json
- Views – contains the C# MVC Layout Razor Pages (cshtml)
- wwwroot – the distributed package including html, css, js(compiled TypeScript, minified) and fonts
- appsettings.json – appsettings from web.config
- Program and Startup – default ASP.NET Core configuration to start your Web App
- tsconfig.json – TypeScript configuration
- webpack.config.js – Webpack configuration for development and production(minified)
- webpack.config.vendor.js – Configuration for packing all third-party libraries (TypeScript, Css, Fonts, etc.)
Now you’re ready to start working on your new ASP.NET Core + Angular Single Page Application! Good luck!