AngularCliAspNetCore
AngularCliAspNetCore copied to clipboard
Angular CLI & ASP.NET Core WebAPI in the same project
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 theoutputPath
:
"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 theConfigureServices
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