Angular Proxy Services
Watch the video here
Prerequisites
Loose Agenda
Make an HTTP call to our .NET application from our Angular application
Step by Step
Clone .NET application
We’ll be leveraging code from the .NET WebAPI video for today’s exercise.
Open a terminal session to a playground directory and run the following commands
git clone https://github.com/Non-Zero-Days/dotnet-csharp-webapi.git
cd dotnet-csharp-webapi
code .
This will clone the WebAPI files locally, open a developer environment to the code, and start the application.
Add CORS policy to .NET application
To simplify the interactions with the .NET application we will open the CORS policy to any origin and we will remove the defaulted behavior of HTTPS redirection. More details on CORS is available in Additional Resources. Note that this is not a claim of best practices, but more to separate concerns for our learning objectives.
In Visual Studio Code, navigate to Startup.cs
.
In the using declarations at the top of the file add using Microsoft.Net.Http.Headers;
Remove line 50 app.UseHttpsRedirection();
At the top of the ConfigureServices method add
services.AddCors(options =>
{
options.AddDefaultPolicy(
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
At the top of the Configure method add
app.UseCors();
In the terminal instance for the dotnet-csharp-webapi directory, run
dotnet run
Clone and Start Angular application
We’ll also be leveraging code from the Angular video for today’s exercise.
Open another terminal session to the above playground directory and run the following commands
git clone https://github.com/Non-Zero-Days/angular.git
cd angular
npm install
code .
ng serve
This will clone the Angular files locally, start the developer environment, and run the application
Create a Proxy Service in Angular
Open a terminal instance to the Angular directory and run the following command to generate a service
ng generate service proxy
In Visual Studio Code, navigate to /src/app/app.module.ts
Add ProxyService to the providers array. Make certain that the ProxyService class is imported in at the top of the file as import { ProxyService } from './proxy.service';
Add HttpClientModule to the imports array. Make certain that the HttpClientModule is imported at the top of the file import { HttpClientModule } from '@angular/common/http';
Your imports array will now look like
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
Your providers array will now look like providers: [ProxyService],
Navigate to /src/app/proxy.services.ts
Adjust the constructor function to inject HTTPClient.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class ProxyService {
constructor(private http: HttpClient) { }
}
Add a new function to the ProxyService as follows:
getMotD(): Observable<string> {
let url = 'http://localhost:5000/api/NonZero/motd';
return this.http.get(url, {responseType: 'text'});
}
Make certain that Observable is imported from rxjs at the top of the file like import { Observable } from 'rxjs';
Use the Proxy Service
In app.component.ts add a new motd string variable motd: string = '';
.
Now let’s add the proxy service to the constructor
constructor(private proxyService: ProxyService){}
Make certain that the ProxyService is imported at the top of the file import { ProxyService } from './proxy.service';
Inside of the constructor let’s call the function we added to ProxyService and subscribe to the results.
constructor(private proxyService: ProxyService){
this.proxyService.getMotD().subscribe(data => {
this.motd = data;
})
}
This allows the Angular application to asynchronously fetch and assign the result of this motd call to our local motd variable.
Now let’s show the result of our motd call in our app.component.html
Navigate to src/app/app.component.html
and adjust the code to as follows:
<app-header></app-header>
<h1></h1>
<router-outlet></router-outlet>
Review results on http://localhost:4200
Note that you can use the PUT endpoint on the .NET swagger page to adjust the MotD response and see the updated message on refresh of the Angular application.
Congratulations on a non-zero day!