In the previous module we added the Web API project to the solution. In this module we are going to add the Angular project.
A Second Look at available Dotnet project types
If we run the
dotnet new listcommand again, we can see one of the available project templets is the “ASP.Net Core with Angular” template.
The following screenshot shows the architecture of the “ASP.Net Core with Angular” template.
In the above solution we have a project named “FredsCars” that is basically set up as a WebAPI project with a Pages folder for Razor Pages which would not be used much if at all since Angular would handle the front end.
The Angular application is in a folder called ClientApp but it is actually a folder on the root of the WebAPI/RazorPages project.
You can see how this is kind of a blurry setup and could be difficult for new developers to draw a firm boundary between the front-end and back-end.
This was the only option in Dotnet up until 2019. But we have been going a slightly different direction so far.
In the previous modules we have created the FredsCars solution and added to it a nice clean WebAPI project with no Razor Pages involved again since we know Angular is going to handle the front-end.
Our next task now is to finally add in the “Standalone TypeScript Angular Template”.
Add a Standalone TypeScript Angular Template to the project.
In the Solution Explorer, right click the FredsCars solution and select, “Add –> New Project”.
In the “Add a new project” dialogue, search for “Standalone Typescript Angular project”.
Select the “Standalone Typescript Angular project” item from the results and click Next.
In the “Configure your new project” dialogue, set the Project name to FredsCars and click Next.
In the “Additional information” dialogue, make sure to check the “Add integration for Empty Web API project”. This will add and modify the necessary files so that the Angular project can serve as the front-end to the back-end Web API project. Click Create.
You’ll see a message saying “Creating Project” and when the process is complete the Standalone Typescript Angular project will be under the solution in Solution Explorer.
What’s Next
Well we almost have an up and running application now. In this module we added in the front-end Angular project; Or more specifically the “Standalone Typescript Angular” project. All that’s left to do for the initial solution and projects setup is a little configuration to get the back-end and front-end talking to each other. We’ll take care of that in the next module.