In the previous tutorial, I have discussed about how to create a web application with ASP.NET Core 2.0 and Angular 2 using Visual Studio Code Yeoman generators. This way is very easy to create a web application. So, When I created the project, you have seen there are so many folders and files are created under the “MYFIRSTAPP” folder. And we didn’t explain about these folders and files in previous tutorial.
But now in this tutorial, I will discuss the project folder structure of ASP.NET Core 2.0 and Angular 2 application. And I will explain what are the purpose of these folders and files in asp.net core angular 2 project.
If you don’t know how to create a project with ASP.NET Core 2.0 and Angular 2 using Visual Studio Code generators, then I would highly recommend to go previous tutorial.
ASP.NET Core Angular 2 project folder structure
Let’s understand what is the purpose behind these files and folder in ASP.NET Core Angular 2 project.
Where we have all the client-side code of the angular app. E.g. Components, Modules, routing, and templates etc. Any further client-side (Angular 2) development code should be written here.
It belongs to ASP.NET Core. The purpose of this folder is exactly same as in ASP.NET MVC. The controller can be written here.
It contains all the npm (Node Package Manager) packages installed. The Package.json file contains the list of all the npm packages that needed to work with Angular 2 and other technologies Jquery, bootstrap etc.
It also belongs to ASP.NET Core. The purpose of this folder is also exactly same as in ASP.NET MVC. It contains the MVC Razor HTML Files like Index, Layout, Error etc.
It is the folder, where we put the public assets (Static files and Libraries) for our application for the client side. E.g. Images, Fonts, Icons, and etc. So, these static files and libraries are accessible right from the root of the project.
This is where we store our application settings in ASP.NET Core. In previous versions, we used web.config for that.
This is ASP.NET Core class where our application starts. It is very important file in ASP.NET Core. If you open this file, then you will see this class contains a Main() method which looks quite familiar with that you have been seeing in C# Console apps.
If you open this class, then you will see it have 2 methods ConfigureServices() and Configure(). This class is basically used for configure middle-wares on the request pipeline. We also use this class as a Dependency Injection Container for ASP.NET Core.
This is project file that visual studio recognizes.
In this file, we have the configuration for compiling all the third party libraries. If you want to add any third-party configuration in your project, then you can add them here.