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 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 the downloaded Installer
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
Check the Installation by running these commands in your terminal window.
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.
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
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 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 process._tickCallback (internal/process/next_tick.js:188:7)
Run this npm command in your terminal.
npm install –save-dev @angular-devkit/build-angular
@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.
- 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:
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.
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.