Create an Angular 6 Site in .Net Core Part 1
Tags: tutorial, dotnetcore, angular, webdev
Published: 2019-01-29 11:11:41

---
title: Create an Angular 6 Site in .Net Core Part 1
published: true
description: 
tags: tutorial, dotnetcore, angular, webdev
canonical_url: http://charles.stuartedwards.me.uk/blog/create-an-angular-6-site-in-net-core-2-1-from-scratch-pt1
series: Angular 6 Site in .Net Core
---


Apart from looking at AngularJS years ago, I haven't use Angular so this is my first bash at it. We are going to create an angular 6 web application from scratch. I have intentionally not used the Angular template in visual studio because I like to understand how the project is constructed.

Let's get started:

1. In visual studio create a new **ASP.NET Core Web Application**
 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-1.png" style="width:100%" />
 
2. Select **Empty** project template
 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-2.png" style="width:100%"/>

3. Install node so that we have the npm (node package manager): [https://nodejs.org/en/]( https://nodejs.org/en/)

    **Update**: You may need to restart visual studio before the next step.


4. We need to install the angular cli, to do this open the **Package Manager Console** in visual studio and run the following command:
	<pre class="prettyprint lang-cl">
	npm install -g @angular/cli
	</pre>
 
	When this completes you may get some warnings ….I have no idea if this is good or bad :-|  but everything seems to work later.
	 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-4.png" style="width:100%"/>
	 
5. Now we need to create the angular application. To do this run the ng new command, but first we need to navigate to the **.Web** folder in the Package Manager Console. By default the Package Manager Console runs in the directory the .sln file is located.

	In the **Package Manager Console** enter cd [name of your project]:
	<pre class="prettyprint lang-cl">
	cd AngularSix.Web
	</pre>
	 
6. Run the following command to create the angular app:
	<pre class="prettyprint lang-cl">
	ng new ClientApp
	</pre>

	This will take a few minutes because the node_modules folder has to grow in size by about 200Mb <br>
  <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-6.png" /> 
	<br>
	<br>
		In visual studio you should have a whole load of new files under the ClientApp folder <br>
	 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-7.png" />
	
7. In the Startup.cs change the **ConfigureServices** method to the following:
	~~~ csharp
	public void ConfigureServices(IServiceCollection services)
	{
		services.AddSpaStaticFiles(configuration =>
		{
			configuration.RootPath = "ClientApp/dist";
		});
	}
	~~~
	 
8. In the **Configure** method update it to the following:
	~~~ csharp
	public void Configure(IApplicationBuilder app, IHostingEnvironment env)
	{
		if (env.IsDevelopment())
		{
			app.UseDeveloperExceptionPage();
		}

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

		app.UseSpa(spa =>
		{
			// To learn more about options for serving an Angular SPA from ASP.NET Core,
			// see https://go.microsoft.com/fwlink/?linkid=864501
			spa.Options.SourcePath = "ClientApp";

			if (env.IsDevelopment())
			{
				spa.UseAngularCliServer(npmScript: "start");
			}
		});
	}
	~~~
		
9. Press play and go grab a coffee, the first build takes a little time.
 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-9.png" style="width: 112px;"/>
 
 YAY!! <br>
  <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-10.png" style="width:60%"/>
		
	
To check the angular bit is working. While the application is still running open the app.component.ts file <br>
 <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-11.png" />
 
Modify the AppComponent title and save the change. watch the web page.
  <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-12.png" style="width:100%"/>
	
OMG! the web page automatically updates.

So not knowing anything about Angular I did the Tour of Heroes tutorial ([v6.angular.io/tutorial](https://v6.angular.io/tutorial)) which covers the fundamentals of Angular. I recommend you go and do the tutorial to build up the ClientApp we just created. When you come back your ClientApp should look as follows:

**NOTE:** when you create components in the Tour of Heroes module you need to be in the ClientApp directory.

  <img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 3/3-13.png" style="width:50%"/>

If you didn't do the Angular tutorial then the code can be found here [stackblitz.com/angular/vvxldjlmnna](https://stackblitz.com/angular/vvxldjlmnna)

Wait a minute where's the .Net Core! Well this post has gone on long enough so I am going to write the .net core bit in the next post.

[Part 2](http://charles.stuartedwards.me.uk/blog/create-an-angular-6-site-in-net-core-2-1-from-scratch-pt2)


> Originally published on my personal blog: [Create an Angular 6 Site in .Net Core 2.1 from Scratch Part 1](http://charles.stuartedwards.me.uk/blog/create-an-angular-6-site-in-net-core-2-1-from-scratch-pt1)

#### Additional Resources:
- [www.codeproject.com/Articles/1255288/How-to-Set-Up-Environment-for-Angular-6-with-NET-C](https://www.codeproject.com/Articles/1255288/How-to-Set-Up-Environment-for-Angular-6-with-NET-C)
- [arunendapally.com/post/how-to-create-an-app-with-angular-6-and-asp.net-core-2.0]( http://arunendapally.com/post/how-to-create-an-app-with-angular-6-and-asp.net-core-2.0)
- [angular.io/guide/quickstart](https://angular.io/guide/quickstart)