1

I have successfully deployed my angular app onto Heroku. I have implemented the proxy.conf.json file to connect to the Backend API (which is also deployed in Heroku and its a Java JAX-RS REST API) and it is up and running. The proxy.conf.json file contains:

{
"/webapi/*": {
  "target": "https://backend-api.herokuapp.com",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true
}  }

Also updated the start command in the package.json file as

"start": "ng serve --proxy-config proxy.config.json"

This is working perfectly fine in local using localhost:4200 But when I am deploying the project onto heroku, the backend call is not being held. for your reference i am attaching the complete package.jsonfile

    {
  "name": "myapp-client",
  "version": "0.0.0",
  "scripts": {
    "heroku-postbuild": "ng build --aot --prod",
    "ng": "ng",
    "start": "npm run build & concurrently --kill-others \"npm run serve-api\" \"npm run serve\"",
    "serve": "ng serve --proxy-config proxy.config.json",
    "build": "ng build",
    "serve-api": "node server.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "engines": {
    "node": "14.8.0",
    "npm": "6.14.7"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.1000.6",
    "@angular/animations": "~10.0.9",
    "@angular/cli": "^10.0.6",
    "@angular/common": "~10.0.9",
    "@angular/compiler": "~10.0.9",
    "@angular/compiler-cli": "^10.0.9",
    "@angular/core": "~10.0.9",
    "@angular/forms": "~10.0.9",
    "@angular/platform-browser": "~10.0.9",
    "@angular/platform-browser-dynamic": "~10.0.9",
    "@angular/router": "~10.0.9",
    "awesome-typescript-loader": "^5.2.1",
    "bootstrap": "^4.5.2",
    "concurrently": "^5.3.0",
    "cors": "^2.8.5",
    "d3": "^3.5.17",
    "express": "^4.17.1",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "ng2-nvd3": "^2.0.0",
    "nvd3": "^1.8.6",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.2",
    "source-map-loader": "^1.0.1",
    "tslib": "^1.10.0",
    "typescript": "~3.9.7",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.6",
    "@angular/router": "~10.0.9",
    "@types/jasmine": "^3.5.12",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.54",
    "codelyzer": "^5.1.2",
    "concurrently": "^5.3.0",
    "install": "^0.13.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "^6.1.3"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.9.",
  "main": "karma.conf.js",
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/myapp_tool/myapp-client.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/myapp_tool/myapp-client/issues"
  },
  "homepage": "https://gitlab.com/myapp_tool/myapp-client#readme"
}

And the server.js file contains:

const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var cors = require('cors');

const app = express();

var corsOptions = {
    origin: 'https://backend-api.herokuapp.com',
    optionsSuccessStatus: 200
}

//app.use(cors())

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static(path.join(__dirname + '/dist/myapp-client')));

//app.use('/webapi',api);
app.get('/webapi', cors(corsOptions), function (req, res, next) {
    res.json({msg: 'This is CORS-enabled for Java API!'})
});

app.get('*', (req,res) => {
    res.sendFile(path.join(__dirname+'/dist/myapp-client/index.html'));});
//app.get('*', function (req,res) {
        //res.sendFile('index.html', {root: '/dist/myapp-client'}));});
//const port = process.env.PORT || '8080';
//app.set('port',port);

//const server = http.createServer(app);

app.listen(process.env.PORT || 8080, function (){
    console.log('CORS-enabled API is running on Port:${process.env.PORT || 8080}')
});

The deployed angular app works fine till its having static pages. but when it needs to access the backend-api it is unable to do so. Like when I want to login and send the userid and password; the request should go like following:

https://myapp-client.herokuapp.com/login ==>> https://backend-api.herokuapp.com/webapi/login

But in the browser console i found that it is actually sending request to:

https://myapp-client.herokuapp.com/webapi/login

The angular app is unable to read the backend-api address; instead adds the rest of the path with it self(can't figure out why????).

I am unable to find any other method apart from proxy.conf.json and cors for dynamic backend api call. Sorry guys for the long post. But i am unable to find any helpful material from anymore, hence I have explained all the things in more detail. Can anyone please help, I have a deadline hanging on me. Thanks in advance for any help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.