Angular 5 or 6 subscriptions don’t work when using proxy

Question

I have built a Java Restful API and I want to access it from Angular 5. For development i have angular server running on port 4200 while my backend runs on 8080. I am trying to setup proxy in angular in order to communicate with backend. So i have created the following proxy.conf.json file:

{
  "/**": {
    "target": "http://localhost:8080",
    "changeOrigin": true,
    "secure": false,
    "logLevel": "debug"
  }
}

Then i run in terminal

ng serve --proxy-conf proxy.conf.json

and i get the message

Proxy created: /**  ->  http://localhost:8080
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]      

So till now everything is fine.

When i type in browser url for example

http://localhost:4200/incidents/all

everything works fine and i get the response

[{"id":55,"protocolNo":121212222,"date":1525122000000,"isPayed":true,"yliko":"fdasdfasfsaf","makro":"fdsa","anoso":"fdsa","mikro":"fdsafds","symperasma":"dfsdfsadf","klinikesPlirofories":"fsdafds","histo":"dfsadffga","simpliromatikiEkthesi":"fdsadfsdfa","patient":{"id":1,"firstName":"Μιχαήλ","lastName":"Τουτουδάκης","birthday":"1975-08-19","fatherName":"Δημήτριος","telephone":"6948571893","email":"mixtou@gmail.com","sex":true,"city":{"id":1,"name":"Χανιά"}},"doctor":{"id":1,"firstName":"όνομα","lastName":"επίθετο","telephone":"2821074737","email":"papa@papa.com","fatherName":"πατέρας","specialty":{"id":1,"name":"Αγγειοχειρουργική"},"city":{"id":1,"name":"Χανιά"}},"clinic":{"id":1,"name":"Κλινική Τσεπέτη","telephone":"123456789","address":"Παπαναστασίου","email":"test@test.com"},"signingDoctor":{"id":1,"lastName":"Δασκαλάκη","firstName":"Άννα"},"mikroskopikaSymperasma":null,"anosoEkthesi":null,"cancer":true},{"id":56,"protocolNo":11111,"date":1525640400000,"isPayed":false,"yliko":"dfsadfs","makro":"dfsfsdfdsdfsadfsa","anoso":"dfsdfsfdssfafasd","mikro":"dsfdfsadfsadfssdf","symperasma":"σδγσδγσαδγσγσασδγ","klinikesPlirofories":"δδφφγφγαφαγ","histo":"fdsasdfd","simpliromatikiEkthesi":"γαγσαδσγσδγσδαγ","patient":{"id":5,"firstName":"Στέφανος","lastName":"Μαριόλος","birthday":"2018-03-26","fatherName":"","telephone":"4838583845","email":"","sex":true,"city":{"id":2,"name":"Ρέθυμνο"}},"doctor":{"id":3,"firstName":"Χαράλαμπος","lastName":"Πρωτοπαπαδάκης","telephone":"4343454345","email":"","fatherName":"","specialty":{"id":29,"name":"Πνευμονολογία - Φυματιολογία"},"city":{"id":1,"name":"Χανιά"}},"clinic":{"id":1,"name":"Κλινική Τσεπέτη","telephone":"123456789","address":"Παπαναστασίου","email":"test@test.com"},"signingDoctor":{"id":1,"lastName":"Δασκαλάκη","firstName":"Άννα"},"mikroskopikaSymperasma":"γσαγδσασαδγδασγαγσγσ","anosoEkthesi":"φδαφγφγφδσγ","cancer":true}]

However visiting backend end point from angular i get nothing. For incidents for example i have the following service:

getIncidents(): Observable<Incident[]> {
    console.log('getting incidents');
    const incidentsUrl = '/incidents/all';
    return this.http.get<Incident[]>(incidentsUrl)
      .pipe(catchError(ErrorHandler.handleError));
  }

Which generates the following error in javascript console:

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

At the following line:

this.subscriptions.push(this.incidentsService.getIncidents().subscribe((results) => {
              this.comService.sendIncidents(results);
              this.spinner.hide();
            }));

Which means that this.incidentsService.getIncidents() retturns nothing??

Any Ideas??

Answer 1

I removed the this.subscriptions.push(...) action and everything works fine. Why is this happening when using subscriptions. I need them because onDestroy i call subscription.unsubsribe() to avoid memory leaks. Note that this happens when using proxy. If i don't use proxy and deploy the project to tomcat everything works ok. I don't get null inside push(). Any Ideas???

The problem was at the declaration of subscriptions. In the beginning it was:

subscriptions: Subscription[];

I changed it to

subscriptions: Subscription[] = [];

and everything worked fine.

subscriptions

wasn't initialized.