How to host Angular with ASP.NET Core application in IIS?

Published:

Bold BI users can embed Bold BI dashboards using Angular with ASP.NET Core applications. This article explains how to host an Angular with .NET Core application in IIS.

Follow these steps to host an Angular with .NET Core application in IIS.

Download the .NET 6.0 SDK file from here, then download and install the .net windows hosting bundle from here.
Follow the steps to enable the IIS and features.
Once IIS is enabled, create a site in it for the net core application by providing the path of the published folder of the asp.net core as follows.

Provide the port number of the asp.net core site as a value of the apiHost in app.component.ts.

@Injectable()
Export class AppComment {
    //ASP.NET Core application would be run on http://localhost:61377/, which needs to be set as `apiHost                                                                     
    public apiHost = “http:/localhost:61377”;
   //Your Bold BI application environment. (If Cloud, you should use ‘cloud’, if enterprise, you should  use `enterprise`)                                                                     public environment= “enterprise”;
   //Dashboard server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi )                                                                              
   public rooturl= “http:localhost;53623/bi”;
    //For Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI cloud, it should be empty string.                                                                     
    public siteIdentifier= “site/site1”;
  //Url of the GetDetails action in ValuesController of the ASP.NET core application                                                                              
  public authorizationUrl= “/api/bolbiembed/getdashboards”;
  //Url of the GetDashboards action in ValuesController of the ASP.NET core application                                                                              
  public getDashboardUrl= “/api/bolbiembed/getdashboards”;
public dashboards:  any;
public baseUrl: any;
public dashboardServerApiUrl: string;
constructor(private_app: appservice){
}

Publish an angular application by running the command ng build, then create a site for angular in IIS and provide its respective path as follows.

NOTE: If ng build command is not recognized in an angular application, use npm install -g @angular/cli@latest in an angular application in the vs code terminal.

Provide the port number which doesn’t exist on other sites. Click on the Application Pools and the respective application pool, then click Advanced setting to change the identity to LocalSystem.

Proceed to run the application using a similar step for the net core site. First, open the asp.net core hosted site in the browser, then open the angular hosted site. The dashboard will be rendered in the angular hosted site.

Related links

Was this article useful?

Dislike

Written by Enos Otieno Juma

Updated

Comments (0)

How to host Angular with ASP.NET Core application in IIS?

Access denied