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

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.