Deploying angular 9 application - node.js

Question

I am new to angular. I built and deployed to github pages but none of my REST api callouts are working.
I have a node backend deployed on heroku. These API callouts are performed inside ngAfterViewInit() method.
I have added proxy to the backend node-express server.
here id my angular.json
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"musicsite-test2": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/musicsite-test2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "musicsite-test2:build",
"proxyConfig": "src/proxy.conf.json"
},
"configurations": {
"production": {
"browserTarget": "musicsite-test2:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "musicsite-test2:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/umd/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "musicsite-test2:serve"
},
"configurations": {
"production": {
"devServerTarget": "musicsite-test2:serve:production"
}
}
}
}
}
},
"defaultProject": "musicsite-test2",
"cli": {
"analytics": false
}
}
and here is my proxy configuration file
{
"/api/*": {
"target": "https://village-voice-server.herokuapp.com",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
proxy conf file is inside /src folder.
what am i doing wrong?
One more question, can i upload my angular project to a normal web server like that provided by hostinger(web host).

Answer 1

First thing first!! What option did you choose to produce the build in angular. If is normally done by ng build --prod, then no worry, but using libraries like #angular/universal will not run your application easily. For this option, you need to deploy it to platforms who offer node.js to prerender or server side render your web application.
Now, I assume your have simple angular build (by ng build --prod). You need to check whether your application was running while development along with heroku as node backend.
Next question is what is the need of adding proxy to your node application?. If your node api is working fine and it is even being server from another server, I don't think there is any need.
Lastly, you asked about serving it to host like hostinger. Obviously, it can be deployed even in static hosting platforms. But the con is that is based on javascript rendering. So Search Engine Optimization here is not possible.
That is why angular produced #angular/universal. Here, using node, you can get whatever you want. Of course, Search Engine Optimization too.