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
Or
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.
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.
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.
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.UseAngularCliServerinvocation 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.
Jay
16 Dec 2018Angular != Angularjs
Adesh
16 Dec 2018Adesh
16 Dec 2018I know, I didn’t notice the Image. Thanks
D
18 Dec 2018Couple 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.
Adesh
20 Dec 2018Currently, 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.
D
20 Dec 2018Thanks 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.
Adesh
22 Dec 2018I 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 2019Thanks 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.