Create an Angular 6 Site in .Net Core Part 1

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
   

2. Select Empty project template
   

3. Install node so that we have the npm (node package manager): 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:

   npm install -g @angular/cli
   

   When this completes you may get some warnings ….I have no idea if this is good or bad :-| but everything seems to work later.
   

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]:

   cd AngularSix.Web
   

6. Run the following command to create the angular app:

   ng new ClientApp
   

   This will take a few minutes because the node_modules folder has to grow in size by about 200Mb
   
   
   
   
   
   
   In visual studio you should have a whole load of new files under the ClientApp folder
   
   

7. In the Startup.cs change the ConfigureServices method to the following:

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

8. In the Configure method update it to the following:

   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.
   

YAY!!

To check the angular bit is working. While the application is still running open the app.component.ts file

Modify the AppComponent title and save the change. watch the web page.

OMG! the web page automatically updates.

So not knowing anything about Angular I did the Tour of Heroes tutorial (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.

If you didn't do the Angular tutorial then the code can be found here 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

Originally published on my personal blog: Create an Angular 6 Site in .Net Core 2.1 from Scratch Part 1

Additional Resources:

• 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
• angular.io/guide/quickstart