Invalid redirect_uri error from Keycloak with Angular

I am using Keycloak Authentication to authenticate my angular app and so far I have managed to redirect my login to the keyclayak server. But when redirecting instead of the login page, I get a 500 error page with the message Invalid parameter: redirect_uri .
I followed this stackoverflow answer and made sure my client settings are correct. But no matter what I change, I get one log message on the keycloak console.

Keycloak Magazine

09: 39: 21,369 WARN [org.keycloak.events] (default job is 62) type = LOGIN_ERROR, realmId = camunda-demo-auth, clientId = camunda-demo-client, userId = null, ipAddress = 127.0. 0.1, error = invalid_redirect_uri, redirect_uri = http: // localhost: 9002 /

My client settings
Update [Changed settings according to RobbyCornelissen suggestions]

Angular Login Redirection

angular.element(document).ready(function () {
  window._keycloak = Keycloak('../src/app/resources/keycloak.json');

  window._keycloak.init({onLoad: 'login-required'})
    .success(function () {
      angular.bootstrap(document, ['adfWidgetSample']); // manually bootstrap Angular
    });
});