How can I combine an Angular 9 SPA project and an ASP.NET Core 2.2 MVC project into a single Visual Studio 2017 Solution?

Question

I am providing this question/answer because of the frustration that I experienced trying to learn SPA client and MVC server applications. These instructions are paraphrased from chapter 3 of “Essential Angular for ASP.NET Core MVC 3 – Second Edition” by Adam Freeman (Apress) to describe how to create a single Visual Studio 2017 (or VS2019) solution which contains an Angular 9 website project called “ClientApp” as the frontend SPA, and an ASP.NET Core 2.2 MVC project called “ServerApp” as the backend API server project for database access.

It is assumed that you already have a version of Visual Studio 2017 (or 2019), Node.js, Angular/CLI (version 9+) and .NET Core 2.2+ installed and that you know how to use the "cmd.exe" command prompt.

Step 1: Using the command prompt, create the solution folder and the Angular project in a..\source\repos directory by:

>  CD \Users\(username)\source\repos  (or some convenient folder)

>  ng new MyWebSolution –directory MyWebSolution/ClientApp –routing true –style css –skip-tests true –skip-git true
    (Note:    make sure to type this as one long command which may wrap on your screen)

Step 2: Start the Angular development tools using Command prompt:

> cd MyWebSolution/clientapp

> npm start

Step 3: When you see "Compiled successfully"

- browse to http://localhost:4200 to see Angular placeholder content

Step 4: Open Visual Studio, select File > Open > Folder and select the MyWebSolution folder. You should see the contents of the new "ClientApp" project.

Step 5: Replace the contents of the app.component.html file in the ClientApp/src/app folder with the following:

<h2>MyWebSolution</h2>
<span>Angular Content Will Go Here</span>

Step 6: Browse to http://localhost:4200 to see Angular placeholder content has been changed

Step 7: Stop the Angular development tools window by Ctrl-C

Step 8: Prepare for the ASP.NET Core MVC part of the solution in MyWebSolution folder by:

> mkdir ServerApp
> cd ServerApp
> dotnet new globaljson --sdk-version 2.2.110    

Step 9: Create the ASP.NET Core Project

> dotnet new mvc --language C# --auth None

(wait for completion)

Step 10: In Visual Studio, select File > Open > Project/Solution and navigate to the MyWebSolution/ServerApp folder and select the MyWebSolution.csproj file to open the project in .NET mode. Then, right-click the Solution item at the top of Solution Explorer and select Add > Existing Website. - Navigate to MyWebSolution/ClientApp and click the Open button. You should see your Angular website (ClientApp) and your MVC project (SeverApp) in the solution.

Step 11: In VS2017, right-click the ClientApp item, select Property Pages, navigate to the Build section. Make sure that the "Build Web site as part of solution" is NOT checked. You should toggle it on and off again to make sure it is off, then click Apply and Ok to save.

Step 12: From the menu, Select File > Save All, save the solution in the MyWebSolution folder as "MyWebSolution.sln". Use this file to open the solution for development sessions.

Step 13: Change the IIS development ports in the LaunchSettings.json file in ServerApp/Properties folder for HTTP/S consistency:

-  edit LaunchSettings.json and change and save the "iisExpress": section to the following:
    
    "applicationUrl": "http://localhost:5000",
    "sslPort": "5001"

Step 14: Regenerate the Windows Development certificates:

> dotnet dev-certs https --clean
> dotnet dev-certs https --trust

Step 15: Build and run the ASP.NET Core MVC project:

> dotnet watch run

Step 16: Open browser, go to https://localhost:5001, you should see the MVC placeholder content

Step 17: Stop the MVC runtime with ctrl-C, then add an MVC Razor placeholder page to ServerApp folder by right-clicking the ServerApp/Views/Home item and selecting Add > View. Set the View Name to "Placeholder", select "Empty (without model)" template and click Add. Add the following to the empty page and save:

 @{
    ViewData["Title"] = "Placeholder";
 }

 <h2>MyWebSolution</h2>
 <span>ASP.NET Core MVC Content Will Go Here</span>

Step 18: Use this new View by editing and changing the contents of the Index() action result in ServerApp/Controllers/HomeController.cs to:

  return View("Placeholder");

(be sure to save your changes and restart the dotnet runtime)
> dotnet watch run

Step 19: Connect the Angular and the ASP.NET Core MVC applications by adding a package to the MyWebSolution/ServerApp folder by:

> dotnet add package Microsoft.AspNetCore.SpaServices.Extensions --version 2.2  

Step 20: Manage the Angular Server through ASP.NET Core by appending the following to the Startup.cs file's Public Void Configure() method:

    app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "../ClientApp";
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        });

Step 21: Select File > Save All and use command window to start the NPM client and the dotnet development servers:

- in MyWebSolution/ClientApp:   npm start

- in MyWebSolution/ServerApp:   dotnet watch run

Step 22: Browse to https://localhost:5001 - you should see the ASP.NET Core MVC Placeholder

Step 23: Open another browser window and browse to https://localhost:5001/app - you should see the Angular Placeholder

 Note: You can clean, rebuild and build the complete solution from the Visual Studio menu or from the solution item in the Solution Explorer,
     but you should not run or start the Solution by using F5 or Shift-F5.  You may also use for VS2019 and .NET Core 3.0 applications.

Answer 1

No answers necessary , but comments are welcomed. The above mentioned book was the easiest way, for me, to learn how to create the complete application as one Visual Studio solution. If you prefer using Visual Studio Code, you can use it as your Code Editor. This should also work with VS2019 and .NET Core 3.0, as the Adam Freeman book described above uses these version. Get his books to learn from a seasoned developer and master teacher.