Single Page Application using Asp.Net Core 2.2 and Angular

Image: http://ahmet-aydin.net/

Single Page Application using Asp.Net Core 2.2 and Angular

Adesh
December 15, 2018
.Net Core / Angular / Angular 7.0 / Asp.Net Core
11 Comments

In this blog post, we are going to create Single Page Application (spa) using Asp.Net Core 2.2 and Angular. Microsoft has recently announce the release of Asp.Net Core 2.2. .NET Core 2.2 is supported by Visual Studio 15.9, Visual Studio for Mac and Visual Studio Code.

Download

Download the .Net Core 2.2 SDK from below link, if you don’t have in your machine.

Download the .Net Core 2.2 SDK – Mac OS x64 Installer

Run

Run the downloaded Installer

Finish Installation

After all these steps, this setup has installed Microsoft .Net Core SDK 2.2 successfully on your MacOS. The following packages have been installed on your MacOS with this installer.

.Net Core SDK 2.2.101

.Net Core Runtime 2.2.0

Asp.Net Core Runtime 2.2.0

Verify Installation

Check the Installation by running these commands in your terminal window.

dotnet

dotnet –version

Let’s create our Angular app in .Net Core 2.2. We are going to use Visual Studio Core on MacOS. If you don’t have Visual Studio Core, you can download from below link.

Download Visual Studio Core

Create Angular App

Moving forward, let’s create our Angular app using the below command in terminal window. I have created a AngularDemo directory, and run the command inside this directory.

cd angulardemo

dotnet new angular -o zeptoapp

After running this command, it will create Visual studio .csproj file in your folder.

Open the Visual Studio Core IDE, and open the zeptoapp folder. It looks like this.

This project template create an ASP.NET Core app and Angular app. You can use ASP.NET Core app for data access, authorization, and other server-side functionalities.

Your Angular App is inside the ClientApp folder.

Run Angular app

Now, go to clientapp->src folder, and try to run your Angular app by this command in terminal.

ng serve –open

Note:- If you see this error message in your console.

Could not find module “@angular-devkit/build-angular” from “/Users/XXX/Documents/AngularDemo/zeptoapp/ClientApp”.
Error: Could not find module “@angular-devkit/build-angular” from “/Users/XXX/Documents/AngularDemo/zeptoapp/ClientApp”.
at Object.resolve (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/resolve.js:141:11)
at Observable.rxjs_1.Observable as _subscribe
at Observable._trySubscribe (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:44:25)
at Observable.subscribe (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:30:22)
at /usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:99:19
at new Promise ()
at Observable.toPromise (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:97:16)
at ServeCommand.initialize (/usr/local/lib/node_modules/@angular/cli/models/architect-command.js:91:94)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

Run this npm command in your terminal.

npm install –save-dev @angular-devkit/build-angular

Once this @angular-devkit has been installed in your project folder, you are now good to go. Now, run your Angular app using

ng serve –open

This will successfully launch Angular app at http://localhost:4200/

Run Asp.net Core api with Angular app

Run the complete project. Go to Debug->Start Debugging or Pressing F5, your Angular app and .Net Core app will run altogether.

If you look at the Fetch Data screen, you will be wondering how this data is coming, as we haven’t created any Angular component or service to display the data. This is the magic of .Net Core with Angular. We got everything setup for us. Let’s look into the details of each section.

Let’s first look at out .Net Core Controller API code.

SampleDataController file — SampleDataController.cs

You can see, our have SampleDataController.cs file in Controllers folder of our project. In the controller file, we have code for our Fetch Data page.

Now, look at the Angular component in our project solution.

fetch-data.component — fetch-data component

Run Angular app Independently

The project is configured to start its own instance of the Angular CLI server in the background when the ASP.NET Core app starts in development mode. This is convenient because you don’t have to run a separate server manually.

There’s a drawback to this default setup. Each time you modify your C# code and your ASP.NET Core app needs to restart, the Angular CLI server restarts. Around 10 seconds is required to start back up. If you’re making frequent C# code edits and don’t want to wait for Angular CLI to restart, run the Angular CLI server externally, independently of the ASP.NET Core process. To do so:

In terminal, go to ClientApp folder, and run this command.

npm start

Modify your ASP.NET Core app to use the external Angular CLI instance instead of launching one of its own. In your Startup class, replace the spa.UseAngularCliServer invocation with the following:

spa.UseProxyToSpaDevelopmentServer(“http://localhost:4200”);

When you start your ASP.NET Core app, it won’t launch an Angular CLI server. The instance you started manually is used instead. This enables it to start and restart faster. It’s no longer waiting for Angular CLI to rebuild your client app each time.

Summary

In summary, we have learned how to create a single page application using Asp.Net core as backend and Angular as frontend. This is more productive, flexible and less time consuming process.

This Post Has 11 Comments

Jay
16 Dec 2018 Reply

Angular != Angularjs
1. Adesh
  16 Dec 2018 Reply
2. Adesh
  16 Dec 2018 Reply
  
  I know, I didn’t notice the Image. Thanks
D
18 Dec 2018 Reply

Couple of issues:

You start out with Angular 6 right out of the gate. Would’ve been nice if they had supported current ng cli.

Version for dotnet is ‘dotnet –version’.

Command ‘ng serve -open’ in the client app directory responds with ‘Unknown option: ‘-p”. Couldn’t find a -p in any of the build or serve scripts.

When I choose ‘Start Debugging’ in VS Code, the IDE asks me to Select an Environment. I select .NET Core and….. nothing happens.

I finally tried the app with dotnet run, but the API and the web app can’t get on the same page as which localhost port to use.

The API seems hardwired to localhost:5000, and the Angular app that Microsoft scaffolded injects a BASE_URL that uses

export function getBaseUrl() {
return document.getElementsByTagName(‘base’)[0].href;
}

Which seems kinda hacky. Since the Angular server implemented in the dotnet run picks a different localhost port every time you start it up, hard setting this value was just annoying.

Overall a fail for Microsoft. I was excited for this- I thought they had finally put it together.
1. Adesh
  20 Dec 2018 Reply
  
  Currently, I have Angular 7 in installed my MacBook, so I tried with this. Not sure, what do you mean by this?
  Version for dotnet is ‘dotnet -version’
  
  In case, if you want to check your dotnet version, use this
  dotnet – -info
  
  Regarding ‘ng serve –open’, did you try clientapp->src folder? This command won’t work in clientapp folder.
  
  I haven’t faced any environment related issue while Debugging. I faced only one issue, which I mentioned in the blog post.
  
  My angular app and dotnet run on same port.
  
  So, my advice is please check your visual studio environment settings.
  1. D
    20 Dec 2018 Reply
    
    Thanks for the reply, and thanks for the blog post.
    
    The version of the app that the dotnet command scaffolds out is Angular 6. In your screenshot above it says that the local version of the CLI (6.x.x) is lower than the one you have globally (7.x.x). I had the same issue. I imagine the reason they don’t scaffold out an Angular 7 one is that they haven’t written out all of the ceremony that will glue the API and the app together yet. If that is true, it points to a lack of maintenance on MSFTs part.
    
    Still can’t get the ‘Start Debugging in VSCode’ command to work. However, when I went to the debgger panel in VS Code and pressed play, everything worked- I was able to hit breakpoints, add watches, etc. Strange that it would work in one place and not the other.
    
    I was tempted by this, but, I’m going to continue to write the APIs and the SPA separately. This just feels like an MVC solution, personally.
    
    I’m using the Conveyor VS Extension to serve the API I’m developing on my windows machine on the LAN. Then I’m just using my Mac for the front end development. VS Code doesn’t quite feel mature enough for full on .NET core API dev, yet.
    1. Adesh
      22 Dec 2018 Reply
      
      I am happy that, you are able to run the program with your play button.
      
      Yes, it is true that, VS Code is not quite mature for full on .Net core Api dev.
      
      All the best!
Pingback: JavaScript Fundamentals Every Beginners Should Know - ZeptoBook
Carlos Morales
14 Feb 2019 Reply

Thanks a lot for this explanation. Could you explain how to deploy this app to a local IIS or AzureWeb App. When I tried to Publish the app to a local IIS the app can not access the api/SampleData/WeatherForecasts. Home and Counter routes work fine.
(cool|free) (mobile|iphone|android) (tube|porn) site
8 May 2019 Reply

Right here is the right web site for anyone who hopes to understand this topic.
You understand a whole lot its almost hard to argue with you (not that I actually will need to…HaHa).
You certainly put a new spin on a subject which has been written about for years.

Wonderful stuff, just excellent!
auto
22 Jun 2019 Reply

I enjoy looking through a post that will make men and women think.
Also, thank you for allowing me to comment!