DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Build a Simple Chat Server With gRPC in .Net Core
  • Amazon Lightsail: Virtual Cloud Server

Trending

  • A Developer's Guide to Mastering Agentic AI: From Theory to Practice
  • Is Agile Right for Every Project? When To Use It and When To Avoid It
  • The Human Side of Logs: What Unstructured Data Is Trying to Tell You
  • Unlocking the Potential of Apache Iceberg: A Comprehensive Analysis
  1. DZone
  2. Coding
  3. Frameworks
  4. Create an Application With Angular 6 and .NET Core: A Step-by-Step Guide

Create an Application With Angular 6 and .NET Core: A Step-by-Step Guide

In this article, we'll learn how to create both an SPA and a standard web application using Angular 6 and .NET Core. Let's get started!

By 
Neel Bhatt user avatar
Neel Bhatt
·
Jun. 13, 18 · Tutorial
Likes (7)
Comment
Save
Tweet
Share
69.6K Views

Join the DZone community and get the full member experience.

Join For Free

Angular 6 recently launched and has introduced some pretty awesome features.

Let's look at how to create and Angular 6 application with and without using .NET Core SPA templates using Visual Studio 2017.

There is more than one way to create an Angular 6 application with .NET Core - let us see some of them.

Make sure you have installed Visual Studio 2017 and .NET Core's latest SDK and, of course, Node and Angular CLI.

Without Using an SPA Template

In this approach, we will not use any template and will add Angular 6 to an API project.

Create the Angular Application Using a .NET Core 2.0 Template in VS 2017

Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application:

Click 'OK,' and, in the next window, select an API as shown below:

Once the API project is created, open the Command prompt and navigate to the project folder run the following command:

ng new ClientApp

This will create an Angular 6 application within an API project.

The next task is to run our Angular application with .NET Core. For this, we need to add some code within the Startup.cs class.

Add the below lines in the ConfigureService method:

services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});

Add the below lines in the Configure method:

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

app.UseHttpsRedirection();
app.UseMvc();

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

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

The above code adds the required configuration for running Angular code with .NET Core.

Note: Make sure the property "launchUrl": "api/values" is not present in the Properties/launchSettings.json, if it is available then delete it.

Just run the application in the browser:

Your Angular 6 application is now running with .NET Core.

With an SPA Template

In the first approach, we did not use an SPA template to create an Angular app; in this approach, we will use the Angular template.

Create the Angular Application Using .Net Core 2.1 Template in VS 2017

Once you have all these installed, open your Visual Studio 2017 -> Create New Project -> Select Core Web application:

Click on 'OK,' and, in the next window, select Angular as shown below: Visual Studio will create a well-structured application for you.

If you compare this project's structure with the previous version, then you would notice that the Views folder is no longer there:

We do not need that Views folder now.

Delete ClientApp and Install Angular 6

If you open a package.json file under the ClientApp folder, you'll notice the Angular version is 5.0 but we want to create an Angular 6 application.

So go to File Explorer and delete the ClientApp folder:

Once the folder is deleted, open the Command prompt and navigate to the project and run the following command:

ng new ClientApp

This command will create a brand new Angular 6 application.

Once the process is completed, go back to Solution Explorer -> ClientApp -> package.json. This file should show Angular 6.0 references:

That is it. We have just created an Angular 6 application with .NET Core.

Let's try to use any random Angular 6 feature just to make sure we have the latest Angular 6 code.

Test Library Feature

We will test the library feature which has been shipped with Angular 6.

Open the command prompt again and navigate to the ClientApp folder -> run the following command:

ng generate library my-shared-library

Logs in the window confirm that we have Angular 6 now. The library will be created under the ClientApp -> Projects folder:

Hope this helps!

AngularJS application .NET

Published at DZone with permission of Neel Bhatt, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Implementing Micro Frontends in Angular: Step-By-Step Guide
  • Micro Frontends Architecture
  • Build a Simple Chat Server With gRPC in .Net Core
  • Amazon Lightsail: Virtual Cloud Server

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: