Category: Angular

Angular , CORS and .NET Core SignalR

I have written a .NET Core  SignalR + Agular Observable of continously delivering the data. (http://msprogrammer.serviciipeweb.ro/2018/06/25/net-core-signalr-hub-angular-observable/ )

The setup is that .NET WebAPI resides in Visual Studio Project ( .sln. .csproj) and Angular Project is separate in another folder.

There are some settings in the development to be done in order to work

  1. Setting CORS in .NET Core  ( not really necessary- see below)
  2. Usually you will not need to set CORS in .NET Core if you plan to deliver Angular and .NET Core in the same site.

    But anyway, to allow anyoneto call you API , you will do something like this :

    services.AddCors();
    services.AddMvc();
    //...
     app.UseCors(it =>it.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
    //if (env.IsDevelopment())
    //{
    //    app.UseDeveloperExceptionPage();
    //}
    
    

    Of course, you can set for a domain, a header , and so on

    Also , do not forget to handle CORS errors – either by commenting the developer exception page, either by using a custom middleware, like https://blog.jonathaneckman.io/handling-net-core-web-api-exceptions-with-an-aurelia-fetch-interceptor/

  3. Setting  CORS like it does not exists for Angular
  4. For this:

    In the Angular environment.ts put those:

    export const environment = {

    production: false, //put also in the prod

    urlAPI:’/’

    }

    • In production: deliver AOT Angular compiled in the same folder with the .NET
    • This will ensure that , when you send the Angular AOT build with .NET Core WebAPI in the same site, it will work. NO CORS involved 😉

    • In development: This mean Angular ng server intercepting  calls

    Then create a file named proxy.conf.js and put this to redirect:

    const PROXY_CONFIG = [
        {
          context: [
              "/employees",
              "/api",                
          ],
          target: "http://<url to the .NET Core API>/",
          secure: false,
          "changeOrigin": true,
          "logLevel": "debug",
          ws: true
        }
    ]
    module.exports = PROXY_CONFIG;
    
    

    Then run:

    ng serve –proxy-config proxy.conf.js –open

  • Setting SignalR for Angular in development
  • See ws: true in previous proxy.conf.js ? That is all, if you run

    ng serve –proxy-config proxy.conf.js –open

    From unstructured data to application

    Imagine that you have this kind of texts:

    Alpert of Metz – 11th-century – France – Medieval writers
    Aimoin of Fleury – c. 960 – c. 1010 – France – Medieval writers
    Amulo Lugdunensis (Archbishop of Lyon) – 9th-century – France – Medieval writers
    Amulo Lugdunensis (Archbishop of Lyon) – 9th-century – France / Carolingian Empire – Medieval writers
    Andrew of Fleury – 11th-century – France – Medieval writers
    Angelomus of Luxeuil – 9th-century – Francia / France – Medieval writers

    Vitsentzos or Vikentios Kornaros or Vincenzo Cornaro – c. 1553 – c. 1614 – Kingdom of Candia / Crete / Greece – Renaissance

    Adrianus of Tyre – c. 113 – c. 193 – Greece / Roman Empire – Ancient & Classical writers

    How transform this unstrcutured data to make an application that search like in the picture below ( just the R from CRUD )?

    Detailing  the tools:

    1.  Transforming data: Excel + VBA – to parse from the text the name, country / countries , years period  movement and generate insert  /stored procedurees call

    2. Storing+ retrieving data: Sql Server – creating tables and stored procedures to insert / retrieving data

    3. Acessing data: .NET Core – to make WebAPI to export as WebAPI HTTP endpoints t

    4. Display data:

    5. Deploy:

    • RedfHat OpenShift to deploy site
    • Azure to have sql server on the web

    Hours or work ~ 20 . And hey, it works!

    .NET Core SignalR Hub+ Angular Observable

    TL;DR: Deliver all the table content continuously paginated to the browser with .NET Core and Angular


    Long Description:

    I was thinking that delivering paginating data is kind of lame. Why should I , for seeing the whole data, should keep pressing next page / or scrolling  down ? I understand that on the server it is necessary to do this – but on the client ?

    And I was thinking – what about Observables in Angular  , combined with SignalR ? Those observables could obtain data every time – and SignalR is pushing cotinously, until it arrives at the end of the data.

    Done with talking –  let’s show some code:

    We have an Employee classs

    public class Employee
        {
            public string Name { get; set; }
            public int Id { get; set; }
    
        }
    

    code

    and we are feeding with data in a DALEmployee

    public class DalEmployee
        {
            public int FindCountEmployees(string name)
            {
                return ((name ?? "").Length + 1) * 10;
            }
    
            public async Task<Employee[]> FindEmployee(int pageNumber, int pageSize, string name)
            {
                await Task.Delay((pageNumber + 1) * 1000);
                var ret = new Employee[pageSize];
                int startNumber = (pageNumber - 1) * pageSize;
                for (int i = 0; i < pageSize; i++)
                {
                    var e =new Employee();
                    e.Id = startNumber + i;
                    e.Name = e.Id + "employee ";
                    ret[i] = e;
                }
    
                return ret;
            }
        }
    

    We have SignalR that delivers continously the data via a Hub that is connected to an URL

    //do not forget  services.AddSignalR().AddJsonProtocol()  ;
                app.UseSignalR(routes =>
                {
                    routes.MapHub<MyHub>("/employees");
                })
    

    and delivers all data continuously

     public class MyHub: Hub
        {
           
            public override async Task OnConnectedAsync()
            {
                Console.WriteLine("!!!!connected");
                await Task.Delay(1000);
            }
            public ChannelReader<Employee[]> GetEmps(string name)
            {
                var channel = Channel.CreateUnbounded<Employee[]>();
                _ = WriteItems(channel.Writer, name); //it not awaits!
    
                return channel.Reader;
            }
    
            private async Task WriteItems(ChannelWriter<Employee[]> writer, string name)
            {
                var dal = new DalEmployee();
                var nr = dal.FindCountEmployees(name);
                int nrPages = 10;
                for (int i = 0; i < nr / nrPages; i++)
                {
                    var data = await dal.FindEmployee(i+1, nrPages, name);
                    await writer.WriteAsync(data);
                }
    
                writer.TryComplete();            
            }
    

    And this is all that is required on the .NET Core side

    For the Angular Part

    We have a hubconnectionbuilder that connect to the hub

    export class MydataService {
    
      h:HubConnection;
      constructor(private http: HttpClient) { 
        this.h= new HubConnectionBuilder()
          .withUrl(environment.urlAPI + "/employees")
          .withHubProtocol(new JsonHubProtocol())
          //.withHubProtocol(new MessagePackHubProtocol())
          .build();
          window.alert('start');
        this.h.start()
        .catch((t) => window.alert(1));
      }
      
      
    }
    

    and a observable that returns the values

    
    
      public getAllEmpsStream(name:string): Observable<Employee[]>{
        
        const subject = new Subject<Employee[]>();
        this.h.stream<Employee[]>("GetEmps",name).subscribe(subject);
        return subject.asObservable();
    
      }
    
    

    The code on the component is aggregating the values into an array

    findEmployees(){
        this.load=true;
        this.service
          
          .getAllEmpsStream(this.nameEmp)
          //.getEmps(this.nameEmp)
          .pipe(finalize(() => this.load=false))
          .subscribe(it  => {
            
            //window.alert(it.length);
            this.emp.push(...it);
    
          });
    
      }
    

    And that is all. All the values are returned page after page without the need of human intervention…

    Angular , .NET Core, IIS Express and Windows Authentication

    2 years ago I have written about .NET Core Windows Authentication :http://msprogrammer.serviciipeweb.ro/2016/09/26/asp-net-core-and-windows-authentication/ 

    The idea was that for Windows authentication this is mandatory in Web.Config:

    forwardWindowsAuthToken="true"

    Now I want to show how to achieve the same in  IIS Express .NET Core as backend and Angular for front end

    For .NET Core / IIS Express

    1. Configure IISExpress : https://www.danesparza.net/2014/09/using-windows-authentication-with-iisexpress/ 

    On short: find %userprofile%\documents\iisexpress\config\applicationhost.config  or %userprofile%\my documents\iisexpress\config\applicationhost.config  and put

    <windowsAuthentication enabled="true">
        <providers>
            <add value="Negotiate" />
            <add value="NTLM" />
        </providers>
    </windowsAuthentication>

    2.  On your project: Put in launchSettings.json :

    “windowsAuthentication”: true,
    “anonymousAuthentication”: false,

    3.  Optional: To verify add an Action that returns

    (this.User?.Identity?.Name ?? "Not ad enabled")

    For Angular

    return this.http.get(url,{
    withCredentials: true
    });

    4. ASP.NET Core 2.1
    https://github.com/aspnet/Home/releases/tag/2.1.0

    Windows authentication is not enabled after creating project with the Windows authentication option selected
    When creating a template with Windows authentication, the settings to enable Windows authentication in launchSettings.json are not applied.
    Workaround: Modify launchSettings.json as follows:

    “windowsAuthentication”: true,
    “anonymousAuthentication”: false,