How to Create an App with Angular 6 and ASP.NET Core 2.0

Arun Endapally

Rate me:

4.75/5 (7 votes)

23 May 2018Ms-PL3 min read

25.5K

This article would help you in getting started from scratch with Angular 6, ASP.NET Core & Angular CLI using Visual Studio 2017.

Download source code from Github

Introduction

It has become a challenging task to start a new project using Angular and ASP.NET Core though there is an Angular project template provided in Visual Studio 2017 using which we can create an Angular 4 application with ASP.NET Core 2.0 which is useful to explore and learn but it becomes difficult if we need to upgrade it from Angular 4 to Angular 5 or 6. I always feel it is better to learn by creating a project with an empty solution and add more things to it when required so that we have complete control on our solution.

As prerequisites, you would need the install the following if they are not already installed:

Visual Studio 2017
Node.js and npm latest version
ASP.NET Core 2.0

Steps for Creating an App with Angular 6 & ASP.NET Core 2.0 using Visual Studio 2017

Create a new ASP.NET Core Web Application.
Choose empty template and click OK.
You should be able to see a solution with ASP.NET Core 2.0 application.
Right click on the project, add new folder and name it as Controllers.
Right click on the Controllers folder, add new Item by right clicking on Controllers folder and click Add > Controller and name it ValuesController.
Select API Controller and click Add:
Now you would see ValuesController in the Controllers folder.
Hit Ctrl + F5 to run it, you would see “Hello World!” on your browser.
Try to navigate to localhost:<Port>/api/values, you would still see “Hello World!” instead of ValuesController as you still need to configure Startup.cs.

Update Startup.cs as shown below:

public class Startup
{
  // This method gets called by the runtime. Use this method to add services to the container.
  // For more information on how to configure your application, 
  // visit https://go.microsoft.com/fwlink/?LinkID=398940
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc();
  }
 
  // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
  {
    if (env.IsDevelopment())
    {
      app.UseDeveloperExceptionPage();
    }
 
    app.UseMvc();
 
    app.UseDefaultFiles();
    app.UseStaticFiles();
    //app.Run(async (context) =>
    //{
    //  await context.Response.WriteAsync("Hello World!");
    //});
  }
}

Now when you refresh your browser with url localhost:<Port>/api/values, you would be able to see the below:
Now it's time to add Angular 6 app through Angular CLI to the same project, to do that, first open Developer Command Prompt.
Then install Angular CLI globally using the below command in the Developer Command Prompt.
```
npm install -g @angular/cli
```
After installing Angular CLI globally, now navigate to Solution folder using command cd.. and then:
run ng new MyFirstAngular6Core2App. Note that here name of the Angular App should be the same as the name of ASP.NET Core project, in my case, it is MyFirstAngular6Core2App.
Angular App would be created in your solution and your solution would look like below:
Now before running the Angular App, we need to configure few things - for that, first edit the .csproj file.
Modify the .csproj file, under the PropertyGroup, add <TypeScriptCompilerBlocked>true</TypeScriptCompilerBlocked> <PostBuildEvent>ng build --aot</PostBuildEvent> as shown below, this will compile the TypeScript files using Angular CLI instead of Visual Studio.
Now edit angular.json file and set the outputPath to wwwroot. This setting will make sure that Angular CLI will copy the assets to wwwroot after the build (Ctrl + F5).
Now execute ng build in Developer Command Prompt to build the angular App and hit Ctrl + F5 in Visual Studio to run the App and you should see the below App in the browser.

To call ValuesController from Angular App, we need to modify app.module.ts, app.component.ts and app.component.html as follows:

app.module.ts

jsript

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

jsript

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  title = 'app';
  public values: string[];
 
  constructor(private http: Http) {
    this.http.get('/api/values').subscribe(result => {
      this.values = result.json() as string[];
    }, error => console.error(error));
  }
 
}

app.component.html

HTML

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <p *ngIf="!values"><em>Loading...</em></p>
 
  <div style="height: 350px; overflow: auto">
    <table class='table' *ngIf="values">
      <thead>
        <tr>
          <th>Values</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let value of values">
          <td>{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>