Create An Angular 8 App With ASP.NET Core

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.

 

 

After installing the node.js latest version, we can now upgrade Angular CLI. Please use the below command to upgrade Angular CLI.

 

 

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.

 

 

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.

 

 

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.

 

 

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”.

 

 

This is the Angular project. You can see only some default files like “angular.json” and “package.json” inside “ClientApp” folder.

 

 

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”.

 

 

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

using System;

namespace Angular8ASPNETCore.Models
{
    public class Feed
    {
        public string Link { get; set; }
        public string Title { get; set; }
        public string FeedType { get; set; }
        public string Author { get; set; }
        public string Content { get; set; }
        public DateTime PubDate { get; set; }
        public string PublishDate { get; set; }

        public Feed()
        {
            Link = "";
            Title = "";
            FeedType = "";
            Author = "";
            Content = "";
            PubDate = DateTime.Today;
            PublishDate = DateTime.Today.ToString("dd-MMM-yyyy");
        }
    }
}

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

using Angular8ASPNETCore.Models;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Xml.Linq;

namespace Angular8ASPNETCore.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class RssFeedsController : ControllerBase
    {
        readonly CultureInfo culture = new CultureInfo("en-US");

        [HttpGet]
        public IEnumerable<Feed> Get()
        {
            try
            {
                XDocument doc = XDocument.Load("https://www.c-sharpcorner.com/rss/latestcontentall.aspx");
                var entries = from item in doc.Root.Descendants().First(i => i.Name.LocalName == "channel").Elements().Where(i => i.Name.LocalName == "item")
                              select new Feed
                              {
                                  Content = item.Elements().First(i => i.Name.LocalName == "description").Value,
                                  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,
                                  PubDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture),
                                  PublishDate = Convert.ToDateTime(item.Elements().First(i => i.Name.LocalName == "pubDate").Value, culture).ToString("dd-MMM-yyyy"),
                                  Title = item.Elements().First(i => i.Name.LocalName == "title").Value,
                                  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",
                                  Author = item.Elements().First(i => i.Name.LocalName == "author").Value
                              };

                return entries.OrderByDescending(o => o.PubDate);
            }
            catch
            {
                List<Feed> feeds = new List<Feed>();
                Feed feed = new Feed();
                feeds.Add(feed);
                return feeds;
            }
        }
    }
}

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

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We can modify the app component and corresponding HTML file.

 

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  latestPosts: Feed[] = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<Feed[]>('http://localhost:63330/api/rssfeeds').subscribe(result => {
      this.latestPosts = result;
    }, error => console.error(error));
  }

}

interface Feed {
  link: string;
  title: string;
  feedType: string;
  author: string;
  content: string;
  publishDate: string;
}

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1 style="margin-top:10px;">
    Welcome to Angular<b style="color:crimson">8</b> with ASP.NET Core
  </h1>
  <img width="200" alt="Angular Logo" src="../assets/angular-asp-core.png">
  <div class="card" style="margin-left:50px; margin-right:50px; margin-bottom:50px;">
    <div class="card-header" style="font-weight:bold; font-size:x-large;">
      C# Corner Latest Posts from RSS Feeds
    </div>
    <div class="card-body">
      <div class="table-responsive" style="max-height:385px;">
        <table class="table mb-0" *ngIf="latestPosts && latestPosts.length>0">
          <thead>
            <tr>
              <th>Sl.No</th>
              <th>Post Title(With Link)</th>
              <th>Post Type</th>
              <th>Published Date</th>
              <th>Author</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let post of latestPosts; let i = index">
              <td>{{ i + 1 }}</td>
              <td style="text-align:left;"><a href="{{post.link}}" target="_blank">{{post.title}}</a></td>
              <td>{{ post.feedType }}</td>
              <td>{{ post.publishDate }}</td>
              <td>{{ post.author}} </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<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

/* You can add global styles to this file, and also import other style files */
@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.

 

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.