Angular CLI ASP.NET Core

Angular CLI & ASP.NET Core WebAPI in the same project. Angular AoT compilation in development & production mode.

Get the Changelog.

Features

• Angular v7 & ASP.NET Core 2.1
• Angular CLI
• AoT compilation in development & production mode
• Angular CLI, .NET Core CLI or Visual Studio 2017
• Angular Material

Project structure

AngularCliAspNetCore

• Controllers
  • ValuesController.cs Resource API
• Properties
  • lanchSettings.json ASP.NET Core environments
• ClientApp Angular application
• wwwroot Root for Angular application deployment
• Startup.cs WebAPI configuration

Installing

• Requirements
  • At least .NET Core 2.1
  • Node.js and npm
  • At least Angular CLI 7.0.0

Command line & .NET Core CLI

• In ClientApp folder run: npm install
• dotnet build

Visual Studio 2017

• In ClientApp folder run: npm install
• Build the solution

Running

The app will be served on https://localhost:5001

Command line & .NET Core CLI

Development

• dotnet watch run

Staging

• In ClientApp folder run: npm run build
• dotnet run --launch-profile Staging

Visual Studio 2017

Development

• Select AngularCliAspNetCore profile
• Start debugging

Staging

• In ClientApp folder run: npm run build
• Select Staging profile
• Start debugging

Start from scratch

• Create the ASP.NET Core WebAPI:

dotnet new webapi -o AngularCliAspNetCore

• Create the Angular app:

cd AngularCliAspNetCore
ng new --skipGit=true ClientApp

• Open angular.json file and set the outputPath:

"outputPath": "../wwwroot"

• Open package.json file and set the following scripts:

"start": "ng serve --aot",
"build": "ng build --prod",

• Open Startup.cs file and add to the ConfigureServices method:

services.AddSpaStaticFiles(configuration =>
{
	if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == "Development")
	{
		configuration.RootPath = "ClientApp/dist/ClientApp";
	}
	else
	{
		configuration.RootPath = "wwwroot";
	}
});

and to Configure method:

app.UseStaticFiles();
app.UseSpaStaticFiles();

app.UseMvc(routes =>
{
	routes.MapRoute(
		name: "default",
		template: "{controller}/{action=Index}/{id?}");
});

app.UseSpa(spa =>
{
	spa.Options.SourcePath = "ClientApp";

	if (env.IsDevelopment())
	{
		spa.UseAngularCliServer(npmScript: "start");
	}
});

• Open launchSettings.json file and update the environments.

For other features, refer to the repository.

License

MIT