Angular 10 With ASP - NET Core 3.1
Uploaded by
Javed IqbalAngular 10 With ASP - NET Core 3.1
Uploaded by
Javed IqbalAngular 10 with ASP.NET Core 3.
1
Introduction
Angular is an open-source framework for building Mobile & Desktop Web
Applications. It is a framework for creating Single Page Application (SPA).
Requirements:
Basic familiarity with HTML, CSS, JavaScript and object-oriented programming
What is Single Page Application (SPA)?
Single Page Application (SPA) makes Web Application behave like Desktop
Applications. In other words, SPA provides users a very fluid, reactive and fast
experience similar to Desktop Applications.
How to create ASP.NET Core 3.1 Applications with Angular 10
Step 1: Create a New ASP.NET Core 3.1 Application or you can use any
existing ASP.NET Core 3.1 Application.
Step 2: Add the following package to your project as shown in the figure.
Step 3: In the startup.cs file, add the following code.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace AngularTest
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to
the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllers();
services.AddSpaStaticFiles(conf =>
{
conf.RootPath = "ClientApp/dist";
});
// This method gets called by the runtime. Use this method to configure the
HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
}
}
}
Step 4: Now add a new Angular 10 project to your application by going location
of your application.
Step 5: Change line 6 and add --verbose as shown below.
