Full-stack application development with AngularJS 11 and Asp.Net MVC Core 5.0 — Creating Combined Project [part1/4]

  1. Creating and connecting Angular and Asp.Net MVC Core Projects
  2. Creating data models to ClientApp and ServerApp
  3. Creating and consuming Web Services
  4. Generic Repositories and Controllers

Before you start

1) Install .NET Core 5.0

2) Install Node.js

3) Install Visual Studio 2019

4) Install Visual Studio Code [optional]

5) Install SQL Server Express edition

Creating the Project

Installing the @angular/cli Package

npm install --global @angular/cli
angular/cli 11.0.3 installed

Creating the Angular Part of the Project

ng new FullStackApp --directory FullStackApp/ClientApp --routing true --style css --skip-tests true --skip-git true

Starting the Angular Development Tools

cd d:
cd FullStackApp/ClientApp
npm start

Creating the ASP.NET Core MVC Part of the Project

cd d:
cd FullStackApp
mkdir ServerApp
cd ServerApp
dotnet new mvc --language C# --auth None

Preparing the Project for Visual Studio

Preparing to Build the ASP.NET Core MVC Application

Regenerating the Development HTTPS Certificates

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

Building and Running the ASP.NET Core MVC Application

dotnet watch run

Connecting the Angular and ASP.NET Core Applications

  1. Managing the Angular Server Through ASP.NET Core
  2. Using the ASP.NET Core MVC Proxy Feature
dotnet add package Microsoft.AspNetCore.SpaServices.Extensions

Connecting both Apps Using the ASP.NET Core MVC ProxyFeature

app.UseSpa(spa => {    string strategy = Configuration
.GetValue<string>("DevTools:ConnectionStrategy");
if (strategy == "proxy") {
spa.UseProxyToSpaDevelopmentServer("http://127.0.0.1:4200");
}
else if (strategy == "managed") {
spa.Options.SourcePath = "../ClientApp";
spa.UseAngularCliServer("start");
}
});
using Microsoft.AspNetCore.SpaServices.AngularCli;
"DevTools":{
"ConnectionStrategy":"proxy"
}
npm start
dotnet watch run

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store