Create an Angular Application to Update QnA Maker Knowledge Base | Part 1

Thinking about creating an on-premises web application to update the QnA Maker Knowledge base. Then you have come to the right place. This web application will be an alternative to updating QnA KB at https://qnamaker.ai.

Users need a platform where they can update their KB without going to the QnA Maker portal every time. We will make use of Angular as frontend and .Net Core on the backend.

Pre-requisites

1. Visual Studio
2. Node.js

Installing the Angular CLI

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli

Creating ASP.NET Core Web Application Project using Angular Template

Launch Visual Studio. Create a new project using the ASP.NET Core Web Application template.

Give the name of the project. I will be using “QnAUpdator”. Tick the checkbox to place the solution and project in the same directory.

Select the .NET Core version to 3.1 and select Angular template and create the project.

Run the application using Cntrl+F5 so that the node module gets automatically installed. You will see below the build output when the app starts to build.

On startup, you will see a default web application running on localhost. Below is the home page of the application. This may vary according to Visual Studio and Angular CLI version.

You can also run just the angular part of the application using the Node.js command prompt or any other terminal window.

Navigate to the ClientApp folder of the project using the terminal window. This ClientApp folder contains the Angular code which interacts with the .NET Core framework using APIs.

cd QnAUpdator/ClientApp

Give the below command to run the application on port number 4200.

npm start

Open the URL http://localhost:4200/ to view your application.

The reason for using terminal window is because we can save time in creating components for our Angular App.

In the next part, we will edit existing components and create new ones for our functionality.

Thank you All!!! Hope you find this useful.