Easy To Learn .NET 6.0 and Angular - Standalone Template and WEB API Publish to IIS – Part 5

Enter your project name and click Next.

If you want to use the ASP.NET Core and WEB API for your project then you must check the Add integration for Empty ASP.NET Web API and click on Create button.

Adding WEB API Project

Now let’s create a new ASP.NET Core WEB API project with our Angular Standalone Solution.

Right Click your Angular Standalone Solution and add New Project > Select ASP.NET Core Web API and click next.

Enter the project name and make sure the project is under the Angular Standalone Solutions and click Next.

We can see as the Framework here selected is .NET 6.0 and click on Create button.

Now we can see as our ASP.NET Core WEB API project has been added under the Angular Standalone project solution.

Disabling Launch Browser for WEB API project

As we have both our Angular and WEB API project solutions in same solutions, we do not need to open two browsers for Angular and WEB API. Our need is as our WEB API needs to be run in background and perform CRUD operations and some business operation in WEB API and all the data display and controls will be done from our UI Part in Angular project. So now, we disable the Launch Browser options for the WEB API Project.

Right Click on our ASP.NET Core WEB API project and select Properties > Select Debug > Click on Open Debug Launch Profiles UI > uncheck Launch browser

Select the Startup Project

Now we need to make both our Angular and ASP.NET Core WEB API Project run, also we need to make the startup project to start initially. Here first we need to run the WEB API project and followed by that our Angular Project . for making this.

Right Click the Angular and ASP.NET Core WEB API Solution and select Properties, we can see by default it is selected as the Single startup project and here we can see as our Angular Standalone project has been selected.

In order to run both our Angular and ASP.NET Core project we need to select the Multiple startup projects and select the action of each project as start. Make sure as your ASP,NET Core WEB API as top of Angular project as if we want to bind the ASP.NET Core results in Angular then we need to run first our WEB API project and then Angular project.

Open the Program.cs file and change and add the below code as to access the WEB API in both local and from the IIS Server.

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment() || app.Environment.IsProduction())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors();

Publishing WEB API to IIS

First let's publish the WEB API to IIS for this first let's create a folder under our C or D drive with WWWROOT folder and inside we create another folder named as AngularHosting and inside let's create a folder named as AngularAPI and AngularWeb as two folder.

We use the AngularAPI folder to build and publish all our WEB API project. In AngularWeb folder we will deploy our Angular Project.

Publish Angular API project

Right Click on our API Project and click on Publish > Select folder and click Next.

Click Next and browse for the API publishing and click Finish.

We can see as we have successfully published the WEB API to the folder.

Now we can open the web.config will and add the below code to allow cross origin for accessing our WEB API to be used in our Angular Application.

​​​​​​​<httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>

Publish API to IIS

Click Start > Enter IIS > Right Click Sites > Click Add Website > Browse for the API deployed folder and enter the port no which you need and click ok.

Create New App Pool > and set the .NET CLR as No Managed Code.

Select the website which created > On the right click on Basic setting > Change the APPPool to which you created.

Browse and test

Now we can check whether our API is running under IIS or not to check it from the Right Side >Click on Browse and we can see our API is running to test the swagger enter the /swagger and test it.

We can also test it by our local Computer IP address with the port no.

Publishing Angular App to IIS

Creating JSON file for API Connection

First let’s create a JSON file which we used to store the IIS API link address and we use the API address in our Angular project to bind the results.

For this first I create a JSON file under our app folder and added the API Site IP address with portno.

App.component

Now open the app.component file and first import the cons.json file ad next declare the variable as coons and assign the JSON data. In the http get method we add the API iis ipand port address to get and bind the data.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import conString from './cons.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  public forecasts?: WeatherForecast[];
  conns: any = conString;

  constructor(http: HttpClient) {
    http.get<WeatherForecast[]>(this.conns.ConnString+'weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
  title = ‘ShanuAngular’;
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

Deploy the Angular Project

Now let’s deploy the angular project to be published in IIS. Open the command prompt and go to the folder of your project and enter > ng build and click enter from the command prompt.

We can see as the files as been deployed and now copy the files to the folder where you want to use it for the IIS publish.

Follow the same method as we used to publish the WEB API and now, we create a new website and add the path with the Angular project and test it.

Conclusion

Hope this article helps you to understand getting started with ASP.NET Core and Angular Standalone projects and publish both API project and Angular Project in IIS.