Building ASP.NET Core MVC as SPA using Angular 2 and TypeScript
In this article we will learn how to build ASP.NET Core MVC as a Single Page Application (SPA) using latest Angular 2.
When working with Angular 2 and ASP.NET Core, we should consider these points
- Angular 2 build strategy to be used i.e. Gulp, Webpack, Rollup. The usage of Webpack is optimal approach for build mechanism.
- Using ASP.NET Core tag helpers features also.
- Simpler approach to include 3 party libraries
- Working in development or production mode with ease.
These steps can be followed on Windows OS, Linux or Mac OS machines
Step 1 – Software prerequisites
The following software needs to be installed
- Visual Studio Code – Light weight cross platform editor
- Install ASP.NET and .NET Core SDK appropriate for OS
- Latest NodeJS and NPM.
- Install Visual Studio 2015 Update 3 (optional step). For die hard fan of VS IDE, we can use it too.
We will be using Yeoman generators for scaffolding applications. The project template for ASP.NET Core SPA needs to be installed too generator-aspnetcore-spa. Run below command to install them
npm install -g yo generator-aspnetcore-spa
Step 2 – Creating ASP.NET Core SPA app with Angular 2
Now lets create the SPA application using yeoman generator. Give a name to application and select “Angular 2” application in options. It’s command line way of creating applications
After creating ASP.NET Core MVC application, all the NPM packages are installed automatically. It takes few minutes to install all NPM packages.
Run dotnet restore from CLI to ensure all ASP.NET NuGet packages are installed
Step 3 – Understanding the project structure
The generator has created ASP.NET Core MVC application in form SPA with Angular 2, this means we already have MVC application baked with Angular 2 application. Isn’t it wonderful, lets understand project structure that is created.
- ClientApp is an Angular 2 applications with modules, components, templates, Routing etc. Any further Angular 2 development code should be written here.
- Controllers is folder containing ASP.NET Core controllers. Both MVC and Web API controller can be written here.
- node_modules contains all the NPM packages installed. Package.json contains list of NPM packages needed to work with Angular 2, other technologies like bootstrap, JQuery etc. As soon as project gets created from yeoman, scripts are run from project.json
- Views folder contains the MVC Razor HTML files like Layout, Error etc. This shows that we are using ASP.NET Core MVC application.
- dist compiled folder containing Angular 2 main application, vendor files. It’s placed in wwwroot folder as its web root folder.
- package.json and project.json are the essential files for Angular 2 and ASP.NET Core apps. They contain all the dependencies, tooling, build information.
- webpack configuration files does the module bundling tasks. For Angular 2 to load, prepare bundles based on vendor files, app related files, minify when in prod are all performed using webpack configuration.
Step 4 – Two ways of running the app
This application can be run either in CLI mode or using Visual Studio Code launch settings.
Run using CLI mode
We need to run the command dotnet run from the CLI to start the application. It starts application, listens on localhost 5000 port. Open browser, navigate http://localhost:5000 to see the application in action.
When running using CLI, the application run in PROD and even Angular 2 app runs in PROD mode. However you can change it to run under Development mode too.
Run using VS Code
When you open application in VS Code, you will see following warning that required assets needs to created. Click Yes.
Click Yes will create .vscode folder containing two JSON files launch.json and tasks.json. They have predefined code for running application.
Opening launch.json, read through .NET Core Launch (web) configuration. It contains necessary config entries so that it can run on any OS. Also env variable ASPNETCORE_ENVIRONMENT is Development.
Just pressing the F5 the application starts running, open browser automatically, reloads on file changes and most important run in DEVELOPMENT mode.
This is how the application looks like when run using either CLI or VS Code. It’s different from the usual ASP.NET web application because this more focused for being SPA.
Personally I liked the way Angular 2 and ASP.NET Core are used together here, because
- Developed from Microsoft ASP.NET team. Its constantly updated with framework changes.
- Uses webpack for module bundling, soon webpack 2 will make this light weight.
- Very simple way to tweak to run for DEV or PROD mode.
- It also uses Angular Universal for server side rendering of Angular 2 application. This helps load apps much faster.
- Super simple integration with third party JS libraries using Vendor packaging.
- Inbuilt Docker support, makes deployment easy on docker containers.
- Hot Module replacement supported when application run in development.
- We can write Web API in the same project to access data, in turn displayed on Angular 2 apps
So far I have integrated Angular 2 in ASP.NET (MVC 5 and Core) in different ways but this is most elegant way.
Hello Readers, let me know in comments if detailed code walk through needed.