Create An Angular 8 App With ASP.NET Core

In this post, we will see how to upgrade Angular older versions to Angular 8 and create an Angular 8 app with ASP.NET Core and Visual Studio 2017.

Introduction

 
The Angular team has now officially released the latest Angular version 8. There are many new features added to Angular 8. We will see how to create an Angular 8 application in ASP.NET Core and Visual Studio 2017. After creating the Angular application, we will create a Web API controller to fetch the latest C# Corner post details from the RSS feeds and show it in the home page of the Angular application.
 

Install Node JS version 10 or latest

 
Angular 8 requires node.js version 10 or latest to run properly. We can download the node.js latest version from their website. Even if you have an earlier version of node.js, the installer will upgrade it to the latest version.
 
Create An Angular 8 App With ASP.NET Core
 
After installing the node.js latest version, we can now upgrade Angular CLI. Please use the below command to upgrade Angular CLI.
 
Create An Angular 8 App With ASP.NET Core
 
npm i -g @angular/cli
 
This will automatically upgrade our existing Angular version to 8 (current). Please note, this will ask you for a confirmation to share anonymous usage data to Google.
 
Create An Angular 8 App With ASP.NET Core
 
You can say no if you do not wish to share the data. It will take some moments to upgrade our Angular version. After successful upgradation, please verify your current Angular CLI version in command prompt.
 
Create An Angular 8 App With ASP.NET Core
 
We can notice that our Angular CLI is now upgraded to 8.0.0 and Node is also upgraded to 12.3.1.
 

Create a Web Application with ASP.NET Core and Angular template

 
We can create a web application using ASP.NET Core and Angular template in Visual Studio 2017. I often create Angular apps with ASP.NET core in a single project. It will help us to maintain a single application to deploy IIS or Azure. Using this approach, continuous integration and continuous delivery (CI/CD) operations will be very easy.
 
Create An Angular 8 App With ASP.NET Core
 
We can choose ASP.NET Core 2.2 framework and Angular template to create the app. After some time, our project will be ready with all .NET Core dependencies.
 
If you look at the project structure, you can see a “ClientApp” folder under “wwwroot”.
 
Create An Angular 8 App With ASP.NET Core
 
This is the Angular project. You can see only some default files like “angular.json” and “package.json” inside “ClientApp” folder.
 
Create An Angular 8 App With ASP.NET Core
 
You can open the “package.json” file and find that Angular version is still 6 only. We need to upgrade our application to Angular 8.
 
We can simply delete the “ClientApp” folder. Using the below command, we can create a new Angular project with the same name “ClientApp”.
 
Create An Angular 8 App With ASP.NET Core
 
It will again take some time to install all the npm packages and our Angular project will be ready after a few moments.
 
As I informed earlier, we will fetch the latest post details from C# Corner RSS feeds and show it in Angular home page (Inside App component itself).
 
We can create a new “Models” folder and create a class “Feed” inside it.
 
Feed.cs
  1. using System;  
  2.   
  3. namespace Angular8ASPNETCore.Models  
  4. {  
  5.     public class Feed  
  6.     {  
  7.         public string Link { getset; }  
  8.         public string Title { getset; }  
  9.         public string FeedType { getset; }  
  10.         public string Author { getset; }  
  11.         public string Content { getset; }  
  12.         public DateTime PubDate { getset; }  
  13.         public string PublishDate { getset; }  
  14.   
  15.         public Feed()  
  16.         {  
  17.             Link = "";  
  18.             Title = "";  
  19.             FeedType = "";  
  20.             Author = "";  
  21.             Content = "";  
  22.             PubDate = DateTime.Today;  
  23.             PublishDate = DateTime.Today.ToString("dd-MMM-yyyy");  
  24.         }  
  25.     }  
  26. }  
This class contains all the properties for the latest post details fetched from RSS feed.
 
We can create the Web API controller “RssFeedsController” inside “Controller” folder.
 
RssFeedsController.cs
  1. using Angular8ASPNETCore.Models;  
  2. using Microsoft.AspNetCore.Mvc;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Globalization;  
  6. using System.Linq;  
  7. using System.Xml.Linq;  
  8.   
  9. namespace Angular8ASPNETCore.Controllers  
  10. {  
  11.     [Route("api/[controller]")]  
  12.     [ApiController]  
  13.     public class RssFeedsController : ControllerBase  
  14.     {  
  15.         readonly CultureInfo culture = new CultureInfo("en-US");  
  16.   
  17.         [HttpGet]  
  18.         public IEnumerable<Feed> Get()  
  19.         {  
  20.             try  
  21.             {  
  22.                 XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");  
  23.                 var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")  
  24.                               select new Feed  
  25.                               {  
  26.                                   Content = item.Elements().First(i => i.Name.LocalName == "description").Value,  
  27.                                   Link = (item.Elements().First(i => i.Name.LocalName == "link").Value).StartsWith("/") ? "https://www.c-sharpcorner.com" + item.Elements().First(i => i.Name.LocalName == "link").Value : item.Elements().First(i => i.Name.LocalName == "link").Value,  
  28.                                   PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),  
  29.                                   PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),  
  30.                                   Title = item.Elements().First(i => i.Name.LocalName == "title").Value,  
  31.                                   FeedType = (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("blog") ? "Blog" : (item.Elements().First(i => i.Name.LocalName == "link").Value).ToLowerInvariant().Contains("news") ? "News" : "Article",  
  32.                                   Author = item.Elements().First(i => i.Name.LocalName == "author").Value  
  33.                               };  
  34.   
  35.                 return entries.OrderByDescending(o => o.PubDate);  
  36.             }  
  37.             catch  
  38.             {  
  39.                 List<Feed> feeds = new List<Feed>();  
  40.                 Feed feed = new Feed();  
  41.                 feeds.Add(feed);  
  42.                 return feeds;  
  43.             }  
  44.         }  
  45.     }  
  46. }  
We have added all the logic for getting data from C# Corner RSS feed.
 
Please note that I am using HttpClient in-app component to fetch the data from Web API service. We must include “HttpClientModule” inside the “app.module.ts” file.
 
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { HttpClientModule } from '@angular/common/http';  
  3.   
  4. import { NgModule } from '@angular/core';  
  5.   
  6. import { AppRoutingModule } from './app-routing.module';  
  7. import { AppComponent } from './app.component';  
  8.   
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     AppRoutingModule,  
  16.     HttpClientModule  
  17.   ],  
  18.   providers: [],  
  19.   bootstrap: [AppComponent]  
  20. })  
  21. export class AppModule { }  
We can modify the app component and corresponding HTML file.
 
app.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http';  
  3.   
  4. @Component({  
  5.   selector: 'app-root',  
  6.   templateUrl: './app.component.html',  
  7.   styleUrls: ['./app.component.css']  
  8. })  
  9. export class AppComponent implements OnInit {  
  10.   latestPosts: Feed[] = [];  
  11.   constructor(private http: HttpClient) { }  
  12.   
  13.   ngOnInit() {  
  14.     this.http.get<Feed[]>('http://localhost:63330/api/rssfeeds').subscribe(result => {  
  15.       this.latestPosts = result;  
  16.     }, error => console.error(error));  
  17.   }  
  18.   
  19. }  
  20.   
  21. interface Feed {  
  22.   link: string;  
  23.   title: string;  
  24.   feedType: string;  
  25.   author: string;  
  26.   content: string;  
  27.   publishDate: string;  
  28. }  

app.component.html

  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.   <h1 style="margin-top:10px;">  
  4.     Welcome to Angular<b style="color:crimson">8</b> with ASP.NET Core  
  5.   </h1>  
  6.   <img width="200" alt="Angular Logo" src="../assets/angular-asp-core.png">  
  7.   <div class="card" style="margin-left:50px; margin-right:50px; margin-bottom:50px;">  
  8.     <div class="card-header" style="font-weight:bold; font-size:x-large;">  
  9.       C# Corner Latest Posts from RSS Feeds  
  10.     </div>  
  11.     <div class="card-body">  
  12.       <div class="table-responsive" style="max-height:385px;">  
  13.         <table class="table mb-0" *ngIf="latestPosts && latestPosts.length>0">  
  14.           <thead>  
  15.             <tr>  
  16.               <th>Sl.No</th>  
  17.               <th>Post Title(With Link)</th>  
  18.               <th>Post Type</th>  
  19.               <th>Published Date</th>  
  20.               <th>Author</th>  
  21.             </tr>  
  22.           </thead>  
  23.           <tbody>  
  24.             <tr *ngFor="let post of latestPosts; let i = index">  
  25.               <td>{{ i + 1 }}</td>  
  26.               <td style="text-align:left;"><a href="{{post.link}}" target="_blank">{{post.title}}</a></td>  
  27.               <td>{{ post.feedType }}</td>  
  28.               <td>{{ post.publishDate }}</td>  
  29.               <td>{{ post.author}} </td>  
  30.             </tr>  
  31.           </tbody>  
  32.         </table>  
  33.       </div>  
  34.     </div>  
  35.   </div>  
  36. </div>  
  37.   
  38. <router-outlet></router-outlet>  
I have used some bootstrap classes to enhance UI experience inside the above HTML file. You must install bootstrap in the Angular project before using it.
 
You can import bootstrap file inside the “style.css” file to use it in the entire application without further references.
 
style.css
  1. /* You can add global styles to this file, and also import other style files */  
  2. @import "~bootstrap/dist/css/bootstrap.css";  

We have completed the coding part. We can run our application now. You can get the details about all the latest posts on the home page.

Create An Angular 8 App With ASP.NET Core
 

Conclusion

 
In this post, we have seen how to upgrade Angular older versions to Angular 8. We have created an Angular 8 app with ASP.NET Core. We have first created a web application with ASP.NET Core 2.2 framework and Angular template. This Angular version was 6. We have deleted the Angular project (ClientApp) and again created a new Angular project using Angular CLI with the same name. We have then created a Web API service to fetch C# Corner RSS feeds for latest post details and showed in Angular component. We will try and create more Angular projects with other new features in upcoming articles.
 
Please give your valuable feedback about this article.