CODEWITHSUNDEEP
node.jshttpangular
JasonPerr
JasonPerr

Reputation: 339

What causes http functions in Angular2 to not trigger properly

Issue: HTTP Request from Angular2 service to NodeJS server never getting called. No errors are provided.

Environment: Many other calls from the same service to the same NodeJS server all work. Only this 1 call seems to have an issue. No errors occur, other code within the function in the service thats logging data to the console works fine. Using the same exact call to node thats in the Angular2 service within Postman works with no issue. It only does not work when run inside of Angular.

assets.component.html

<button type="button" class='btn btn-primary'
        [class.selected]="asset === selectedAsset"
        (click)="addToProd(asset)">
  Add to Production
</button>

assets.component.ts

  addToProd(asset) {
    this.productionService.addAssetToProd(this.selectedAsset, this.prodToAddTo)
  }

production.service.ts

  addAssetToProd(asset, prod) {
    const headers = new Headers({'Content-Type': 'application/json'});
    const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    console.log('token is ', token);
    console.log('asset ID: ', asset.assetId);
    console.log('production ID: ', prod.productionId);

    //TODO: Why does this work in Postman but not Here????
    return this._http.get('http://'+globals.pc_local_ip+':3000/production/addAsset/' + asset.assetId + '/' + prod.productionId + token)
      .map(response => {
        console.log('response is ', response)
      })
      .catch(error => Observable.throw(error.json()));
  }

from the console log for the above items at Runtime

token is: ?token=yJhbGciOiJIUzI1Ni...
asset ID:  4f678f3c-620f-476d-bec2-a3646896fa84
production.service.ts:87 production ID:  bd54aeb0-ff00-4ec0-880f-9d0520369c66

Node Application.js

...    
var productionRoutes = require('./routes/productions');    
app.use('/production', productionRoutes);
...

Node /routes/productions.js

router.get('/addAsset/:asset/:prod', function(req, res, next) {
  console.log('req is', req);
});

Upvotes: 0

Views: 45

Answers (1)

JasonPerr
JasonPerr

Reputation: 339

The issue with why the call to the Node backend was never being called was caused by a lack of subscribing to the service calling the http method.

I never thought this was required. Since I had no need to receive anything back from this node call, I didnt care to subscribe to it. I thought this should work but I was wrong.

Once I added a subscribe method into my function in the component. It all started working. The updated working code is below:

assets.component.ts

  addToProd() {
    this.productionService.addAssetToProd(this.selectedAsset, this.prodToAddTo)
      .subscribe(
        response => {
          console.log('response is here: ', response)
        }
      );
  }

Notice the primary difference in the assets component is the .subscribe that was added to the end.

production.service.ts

  addAssetToProd(asset, prod) {
    const aaHeaders = new Headers({'Content-Type': 'application/json'});
    const aaToken = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    console.log('aaToken is ', aaToken);
    console.log('asset ID: ', asset.assetId);
    console.log('production ID: ', prod.productionId);

    return this.http.get('http://'+globals.pc_local_ip+':3000/production/addAsset/' + asset.assetId + '/' + prod.productionId + aaToken)
      .map(response => {
        return response;
      })

  }

The primary change in the service was to simply add the return command into the .map(response => ...

Upvotes: 2

Related Questions