How To Create Angular App With .NET Core In Visual Studio

In this article, I am going to share knowledge of "How to create an angular app inside .net core". Most of the developers are thinking about angular and if it can be merged with visual studio .net core. That's fantastic! Don't worry guys, I am here and am going to explain about this. If you are not aware of Angular and .net core separately, please go through the below given links, which are very helpful to create an angular app with .net core, step by step.

I am going to explain in steps, how to create an Angular app using .net core using visual studio,

Before starting, you should make sure you have already installed Visual Studio 2017.

Step 1

Open Visual Studio and create a project after clicking on File> New> Project. See the below image, for more help.

How To Create Angular App With .NET Core In Visual Studio

Choose template ASP.NET Core Web Application and click on OK. After that one, another popup will be displayed there, so it's now time to select the SPA category. We can choose any template e.g React, Angular, WebAPI, any template according to your requirement. We should select Angular, because we are going to create SPA with .net Core with Angular. See image for more help

Select Angular and click on OK. Now, the SPA template is generating by Visual Studio for Angular with .netCore. It will take approximatly 1 minute to create a complete application structure with all configuration on your system. See image for more help

Now, open the solution explorer and we can see the SPA application structure is ready. Application structure completely follows the latest version of the framework .net Core. Not aware of .net Core? Click here.

So let me explain about ASP.NET Core - Project Structure one by one,

AngularSPAwithCore: Solution Name and project Name (in this project both names are the same but you can choose differently).
Connected Services: We can use to connect any cloud services e.g Azure.
Dependency: It contains all the installed serverside NuGet packages as well as clientside frameworks such as jQuery, Angular etc. Client-side dependencies are managed using NPM in Visual Studio.
Properties: Properties set the configuration launchSettings.json file which includes Visual Studio profiles of debug settings.
wwwroot: Basically, this is a root folder of the application and treated as webroot () folder, Inside wwwroot should be separate folders for the different types of static files such as JS, CSS, Image, bootstrap etc.
ClientApp: Complete Angular application with all configuration. See below image to understand in easy way.

In the above image, we see inside ClientApp Angular configuration available e.g. Component, Package.json, Index.html. etc. If you are not aware of angular application structure, Click here.

Controller: In this folder, we can create our business logic e.g API
Pages: Application related .cshtml pages e.g error.cshtml.
.gitignore: This file is part of the git code versioning tool to configure the setting of git logic, as well as to ignore folder and file from the application.
appsetings.json: As we know, we don't have anything called Web.config in Asp.net Core application, which we use to write our connection strings or application-specific settings. Here, we have a file called appsettings.json to store such types of information.
Program.cs: As we know, Asp.net Core application starts from the program.cs file and execute always void main() function.
Startup.cs: As we know, in Asp.net Core Application, there is no Global.asax file so, instead of that, use Startup.cs which is executed the first time when the application starts.

Now, we can change the configuration in any file according to our project requirement. So, let's move to our application, which is already configured by default.

Application is ready to run, but before that, we should make sure all client-side and server-side packages are available inside the dependency node_module folder. If the yellow icon indicator displaying on the dependency folder, it means we need to rebuild the application to restore the packages.

Let's press f5, or run the application, after compile and build application will open in the browser with default https://localhost:44391/. See the below image.

In this application, default SPA application template is created. Now, we can change layout, component, service etc.

I hope this article is helpful to learn about ASP.NET Core SPA Application with Angular.

Happy Coding!! Keep learning!!