How to avoid ‘Port 4200 is already in use’ error with Angular-CLI?

 

If you get this error: ‘Port 4200 is already in use. Use ‘–port’ to specify a different port’, you might have left your Angular development environment without closing the node.js webserver’s port.

Here’s how you can close it without having to reboot your computer or change your application’s port.

Step 1: Find the connection’s PID

> netstat -ano | findstr :yourPortNumber

Example with its output:

Then locate the PID (surrounded in red)

Step 2: Kill the process using it’s PID

> tskill yourPID

Example:

Step 3: Restart your server

You should be able to run it (using ng serve)

Step 4: Stop your server properly

Don’t forget now to close properly your server by using Ctrl + C and typing Y:

 

That’s it 🙂

How to fix breaking changes since Angular 5.2.8 with Open Id Connect ?

Angular 5.2.8 breaking change

Angular 5.2.8 has introduced URL serialization so special characters are only encoded where needed.
But it broke Open Id connect token readability from hash…..

All the libraries used for Open Id Connect seem to be affected when your token is fetched from the hash in your authentication callback.

Here’s a quick fix to make it work while you waiting for the official fix from Angular (or your Open Id Connect library).

What does look like the encoded url from Angular 5.2.8 ?

 

What did it look like before and how it should look like ?

How can we fix it ?

Before reading the hash to consume the token, we just need to decode the URI like this:

window.location.hash = decodeURIComponent(window.location.hash);
// finalize your authentication process by consuming the token

decodeURI won’t work unlike the previous becaus it  doesn’t encode / decode URI components like ; / ? : @ & = + $ , #

Now you can breathe 🙂 your app works again 🙂

Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: WebAPI configuration

 

Installing required packages

There is only one required package to achieve our Web Api protection with a JWT.

Install https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBearer/

PM> Install-Package Microsoft.AspNetCore.Authentication.JwtBearer -Version 2.0.1

Configure your Web API in Startup.cs:

using System;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace WebApiJwtBearer
{
   public class Startup
   {
      public Startup(IConfiguration configuration)
      {
         Configuration = configuration;
      }

      public IConfiguration Configuration { get; }

     //This method gets called by the runtime. Use this method to add services to the container.
     public void ConfigureServices(IServiceCollection services)
     {
        services.AddAuthentication(options =>
        {
           options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
           options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        }).AddJwtBearer(options =>
        {
           options.Authority = "https://login.microsoftonline.com/136544d9-038e-4646-afff-10accb370679"; <- tenantId
           options.Audience = "257b6c36-1168-4aac-be93-6f2cd81cec43"; <- clientId
           options.TokenValidationParameters.ValidateLifetime = true;
           options.TokenValidationParameters.ClockSkew = TimeSpan.Zero;
       });

       services.AddAuthorization();

       services.AddMvc();
    }

    //This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
       if (env.IsDevelopment())
       {
          app.UseDeveloperExceptionPage();
       }

      app.UseAuthentication();

      app.UseCors(builder => builder
      .AllowAnyOrigin()
      .AllowAnyMethod()
      .AllowCredentials()
      .AllowAnyHeader());
      app.UseMvc();
   }
 }
}

Now you should be done 🙂

Let’s see what happen if we test it :

 

Nice isn’t it? 🙂