ASP.NET Core

How To Create SPA Using ASP.NET Core And Angular 2

Introduction
 
In my previous article "Build Your First ASP.NET MVC Core Application", I explained how to create the Application, using  ASP.NET Core and in my article “Build Your First Angular 2 Application With Type Script", I have explained how to create an Angular 2 Application, using TypeScript.
 
In this article, I will explain how to create SPA Application using an ASP.NET Core and Angular 2 with TypeScript.
 
Prerequisites

The following software needs to be installed in our system before starting the work.
  • .NET Core 1.1.
  • TypeScript 2.0.
  • Node JS version 6 or later.
  • Editor such as VS 2017 or VS Code.
The easiest way to create Angular SPA (Single Page Application) Application with an ASP.NET Core is to use project template. There are many project templates, which are are available on Nuget. To install SPA template, we need to run the command given below from the command prompt.
  1. dotnet new --install Microsoft.AspNetCore.SpaTemplates::*  
 
 
After successful installation of the templates, it lists down all the installed templates. We can use any installed template to create SPA.
 
 
 
Here, I want to create SPA, using MVC ASP.NET Core with Angular, so we need to execute the command given below, using the command prompt at the place, where you want to create an Application.
  1. dotnet new angular  
 
After successful creation of an Application, we need to download dependencies of an Angular 2 as well as an ASP.NET Core. To download the dependencies of Angular, we need to execute the command given below, using the command prompt. This command reads package.json file and download the dependencies.
  1. npm install  
Similarly, using the command given below, we can download the dependencies of an ASP.NET Core, which is defined in package.json (VS 2015) or .csproj file (VS 2017).
  1. dotnet restore  
 
Once all the project dependencies are installed and if we have an editor such as VS 2017, then we can run the project by pressing CTRL + F5.
Alternatively, we can run the project by running the command given below from the command prompt.
  1. dotnet run  
 
 
Output
 
 
 
Structure of the Project
 
When we look at the structure of the project, it contains the files related to configuration such as package.json, tsconfig.json and Angular project related files as well as ASP.NET Core MVC related files.
 
This project initially bootstraps as an ASP.NET Core MVC project by calling an index action method of Home controller. Index.cshtml file internally bootstraps an Angular component i.e. app.component.ts.
 
 
 
This project template puts all Angular related code in ClientApp folder. This folder also contains UI testing related configuration and the code.

Adding New Module in the project template
 
To add new module to this project, first we need to create new folder “MyDetails” under the ClientApp>> app>> Components folder.
Next step is to create module, component and template view.
 
 
 
mydetails.Component.ts 
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'mydetails',  
  5.     templateUrl: './mydetails.Component.html'  
  6. })  
  7. export class MyDetailsComponent {  
  8.       
  9. }  
mydetails.Component.html
  1. <h1>  
  2.     Welcome to my details page.  
  3. </h1>  
The next step is to add navigation to navMenu component. I have a