How to connect to HTTPS using Angular?

[Bob Carpenter]

I have written a LoginComponent, as shown below, that I based on the work of Gerard Sans' Introduction to new HTTP Module. My HTTP version works fine, but I don't know what changes I need to make to get an HTTPS version to work.

The webserviceapp is listening fine on 8443 - when I use the HTTPS URL in a browser I get back the correct JSON. The browser debugger shows no error when using the HTTPS version, but the console.log is not reached.

I'm thinking I need to use the socket.io-client, but I don't know how.

Can someone please explain?

Thanks,

Bob

import { Component, OnInit } from '@angular/core';

import {Router} from "@angular/router";

import { Injectable } from '@angular/core';  

import { Http } from '@angular/http';  

import 'rxjs/add/operator/map';  

@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

})

  

@Injectable()  

export class LoginComponent implements OnInit {

  public http:Http;  

  constructor(private router: Router,  http:Http) {  http stuff

    this.http = http;

  }

  

  ngOnInit() {

      

      console.log("login.component - ngOnInit");

      this.http

//      .get('http://localhost:8080/webserviceapp/info/person/1') //works fine

      .get('https://localhost:8443/webserviceapp/info/person/1')  //need to get working

      .map(response => response.json())

      .subscribe(response => {

         console.log("person data: " +JSON.stringify(response));  //this is not reached for https

      });

  }

  login(event){

    console.log("login.component - login event");

    event.preventDefault();

    this.router.navigate(['/home'])

  }

}

[Sander Elias]

Hi Bob,

Your code looks fine, that is not the issue. But probably your browser is preventing you from mixing http + https in a single page. What are the errors you see in your console?

Regards

Sander

[Bob Carpenter]

Hi Sander,

I appreciate your help!

Below I have pasted the console log.

I am not sure what you mean by "mixing http + https"? I have the http line commented out, was left in to show how I configured it.

Does the log give any help?

Thanks,

Bob

1. login.component - ngOnInit
   login.component.ts (26,7)
2. ERROR Response with status: 0  for URL: null

   1. vendor.js (54467,5)

      [object Object]: {_body: Object, headers: Object, ok: false, status: 0, statusText: ""...}

      _body: Object

      bubbles: false

      cancelable: false

      cancelBubble: false

      currentTarget: null

      defaultPrevented: false

      eventPhase: 2

      isTrusted: true

      lengthComputable: false

      loaded: 0

      returnValue: true

      srcElement: Object

      target: Object

      msCaching: "auto"

      onabort: null

      onerror: null

      onload: null

      onloadend: null

      onloadstart: null

      onprogress: null

      onreadystatechange: null

      ontimeout: null

      readyState: 4

      response: ""

      responseText: ""

      responseType: ""

      responseURL: ""

      responseXML: null

      status: 0

      statusText: ""

      timeout: 0

      upload: Object

      withCredentials: false

      __proto__: Object

      __zone_symbol__errorfalse: null

      __zone_symbol__loadfalse: null

      __zone_symbol__xhrListener: function () {                if (target.readyState === target.DONE) {                    // sometimes on some browsers XMLHttpRequest will fire onreadystatechange with                    // readyState=4 multiple times, so we need to check task state here                    if (!data.aborted && XMLHttpRequest[XHR_SCHEDULED] && task.state === SCHEDULED) {                        task.invoke();                    }                }            }

      __zone_symbol__xhrSync: false

      __zone_symbol__xhrTask: Object

      __zone_symbol__xhrURL: "https://localhost:8443/webserviceapp/info/person/1"

      timeStamp: 33736014.718281954

      total: 0

      type: "error"

      __proto__: Object

      headers: Object

      _headers: Object

      _normalizedNames: Object

      __proto__: Object

      ok: false

      status: 0

      statusText: ""

      type: 3

      url: null

      __proto__: Object

[Sander Elias]

Hi Bob,

I think your server's CORS configuration is off. Not entirely sure, you are not giving me much to work with.

When the http version works, and the https version doesn't I would look at the config of the server anyway. There is nothing in angular that differentiates between protocols.

Regards

Sander

[Bob Carpenter]

Hi Sandler,

Yeah, I started looking at the webservicesapp CORS while waiting to hear from you. I thought I could handle https requests based on the /** mapping I added, but apparently that not true.  Here's how I add the CORS mapping:

What else needs to be added?

package com.bob.webserviceapp.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.ComponentScan;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.annotation.Import;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration

@ComponentScan("com.bob.webserviceapp")

@Import(DBConfig.class)

@EnableWebMvc

public class AppConfig extends WebMvcConfigurerAdapter  {

    @Bean

    public InternalResourceViewResolver viewResolver() {

        InternalResourceViewResolver resolver = new InternalResourceViewResolver();

        resolver.setPrefix("/WEB-INF/view/");

        resolver.setSuffix(".jsp");

        return resolver;

    }

    @Override

    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler("/app-resources/**").addResourceLocations("/resources/");

    }

    //http://docs.spring.io/spring/docs/current/spring-framework-reference/html/cors.html

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**");

    }

    

}

Thanks,

Bob 

[Sander Elias]

Hi Bob,

No idea, I use node and/or nginx for all my projects ;)
but probably you can find some info here.

Regards

Sander

[Bob Carpenter]

Hi Sander,

Well, I deploy a Spring web services app to Tomcat, and the info you provided seems to agree with my @bean config. I'll just have to keep diving. You pointed out one important thing I didn't consider - " There is nothing in angular that differentiates between protocols".  Good to know.

Thanks for all your help.

Bob

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Bob,

Open up the network tab in your brower, and examine the raw headers, and results from your server. Pay also close attention to the kind of request. if you get 'options' but no 'get' it is a CORS issue for sure, but there as more things that could be off.

Regards

Sander

[Bob Carpenter]

Hi Sander,

I traced the problem to the MS Edge browser. It does not like to connect to a URL such as https://localhost:8080/webserviceapp from an app served by ng-cli. All works fine on chrome and firefox. All browsers are latest.

When I google microsoft edge ng-cli https ssl I am not seeing any related issues.

Thanks,

Bob

[Sander Elias]

Hi Bob,

Hmm, did a google search on `https localhost edge` and got quite some results. I think you are right, and Edge doesn't like localhost to much. Did you try connection on ip?

Regards

Sander

[Bob Carpenter]

Hi Sander,

Yes, I just tried https://127.0.0.1:8443/webserviceapp/info/person/1 - doesn't work from ng-cli, but does directly in the Edge browser, as always, like with the domain name versions.

OK, the google search does have hits. Seems to be a loopback issue. I develop on Win10. webserviceapp and client app runs on same computer. My prod server is Linux, I'll have to push a version of the webserviceapp and the client app (currently running under ng-cli) there for testing the issue. It will be a couple days because I need to install an SSL cert.

Thanks,

Bob

[Mughilan Karthick]

Hi guys,

              I have the problem on my angular app. The problem is the non angular Js files are not working properly . It's working​ only after the refresh of page 

Thank you,

Regards,

Mughilan

--

[Bob Carpenter]

Hi Mughilan,

Thanks for the confirmation. A page refresh doesn't help my situation.  Soon, I will put the two apps, webserviceapp and clientapp, on the same Linux-based Tomcat with an SSL certificate, then I'll know if this (clientapp browsing with an Edge browser, using https urls served by webserviceapp) fails in a production environment. I hope not, I'd like my users to be able to use Edge if they want.

I will report back once I know whether Linux is working.

Thanks,

Bob

On Sunday, June 3, 2018 at 7:40:16 AM UTC-7, Mughilan Karthick wrote:

Hi guys,

              I have the problem on my angular app. The problem is the non angular Js files are not working properly . It's working​ only after the refresh of page 

Thank you,

Regards,

Mughilan

On Jun 3, 2018 8:18 AM, "Sander Elias" <sande...@gmail.com> wrote:

Hi Bob,

Hmm, did a google search on `https localhost edge` and got quite some results. I think you are right, and Edge doesn't like localhost to much. Did you try connection on ip?

Regards

Sander

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[Lucas Lacroix]

Edge is probably being stricter than the other browsers or applying a local security policy.

Your client app should not be able to connect to another host/port combination unless that other host/port does CORS correctly. Additionally, you should not be able to mix http and https.

The ng-cli serves up http and it sounds like your web service app is over https, correct? If so, that is very likely your issue and the Edge browser's developer tools should indicate what your issue is. 

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293

                 

Subscribe to receive emails from MEDITECH or to change email preferences.

[Bob Carpenter]

Hi Lucas,

Both clientapp and webserviceapp are using https. I start ng-cli in SSL mode for clientapp; Tomcat local is also running SSL. The likely problem is, on my dev Win10 box I have self-signed certs. The other browsers are fine with it, but Edge probably, as you say, is being stricter.

Soon I will get this all on my prod Linux server, which has a valid SSL cert, then we'll see if the issue persists.

Thanks,

Bob

[Bob Carpenter]

I'm reporting back after deploying clientapp and webserviceapp on the same remote Linux Tomcat server which has a valid SSL certificate installed.

All browsers (Edge, Chrome, Firefox) running on a local Win10 computer are generating console errors (below) regarding a promise with webpack_require. Clientapp is accessed using https, it calls webserviceapp using https. During the webserviceapp call, the error below is generated.

Clientapp was built using "ng build". I then copy the contents of the dist folder to the remote Tomcat deployment folder.

Not sure yet how to solve this. Any ideas?

Thanks,

Bob

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined

TypeError: Cannot read property 'call' of undefined

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login.component.ts (login-login-module.js:69)

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login-routing.module.ts (login-login-module.js:15)

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login.module.ts (login.component.ts:14)

    at __webpack_require__ (bootstrap:81)

    at $_lazy_route_resource lazy namespace object:47

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

    at Object.onInvoke (core.js:4749)

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login.component.ts (login-login-module.js:69)

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login-routing.module.ts (login-login-module.js:15)

    at __webpack_require__ (bootstrap:81)

    at Object../src/app/+auth/+login/login.module.ts (login.component.ts:14)

    at __webpack_require__ (bootstrap:81)

    at $_lazy_route_resource lazy namespace object:47

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

    at Object.onInvoke (core.js:4749)

    at resolvePromise (zone.js:814)

    at resolvePromise (zone.js:771)

    at zone.js:873

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

    at Object.onInvokeTask (core.js:4740)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

    at drainMicroTaskQueue (zone.js:595)

[Sander Elias]

Hi Bob,

Can I check this somewhere? Also, this begs the question, is this only on httpS, or also on http? It looks that you haven't set your basepath to the correct folder, and your app is trying to load things that are outside of the dist folder.

Regards

Sander

[Bob Carpenter]

Hi Sander,

False alarm - all is working. I had a browser cache issue issue on my desktop computer, with all browsers. Switched over to laptop, which had never accessed the clientapp before, and tested with Edge, Chrome and Firefox.

Clientapp accessed using http and https, and accessing webserviceapp using https are all working.

Thanks for all your help. I think I can move onto other issues now.

Bob