Express launching Angular application

Multi tool use
Multi tool use


Express launching Angular application



I have an express server setup online which loads multiple ports and those ports are setup on subdomains for example. port 9000 loads the main domain.com port 8000 loads the main application at "app.domain.com" port 1000 loads "signup.domain.com" and the build version of the app is on port 8500 "build.domain.com".



The application is an Angular application however when I go to load the Angular app it loads on port 4200 or it says 8500 is in use. So currently I am loading that in express like so:


// Build Application - In Development
var appbuild = express();
appbuild.get('/', function (req, res){
res.sendFile('/app/build/myapp/src/index.html', { root: '.' })
});

var port = 8500;
appbuild.listen(port);
console.log('Build App Listening on port', port);



So my question is in Express how can I instead of writing sendfile command make it launch the angular app in that location on port 8500 so my subdomain names will work. The reason I'm asking this is because right now all it does is load the index file but angular or the app isn't running so i just see source code that says app-root and a blank white page.



Thank you in advance.
Robert



--- Update. I've decided to post the entire Express file. My issue is trying to load a angular app on port 8500 from the subfolder upon booting of express. Here is the full server.js code:


// server.js

const express = require('express'),
path = require('path'),
bodyParser = require('body-parser'),
cors = require('cors'),
mongoose = require('mongoose'),
config = require('../config/DB');

mongoose.Promise = global.Promise;
mongoose.connect(config.DB).then(
() => {console.log('Database is connected') },
err => { console.log('Can not connect to the database'+ err)}
);


// Main Website
var web = express();
web.get('/', function (req, res){
res.sendFile('/web/index.html', { root: '.' })
});

var port = 9000;
web.listen(port);
console.log('Web Listening on port', port);

// Main Application
var app = express();
app.get('/', function (req, res){
res.sendFile('/app/index.html', { root: '.' })
});

var port = 8000;
app.listen(port);
console.log('Main App Listening on port', port);


// Build Application - In Development
var appbuild = express();
appbuild.get('/', function (req, res){
res.sendFile('/app/build/myapp/src/index.html', { root: '.' })
});

var port = 8500;
appbuild.listen(port);
console.log('Build App Listening on port', port);

// Sign up Portal
var sign = express();
sign.get('/', function (req, res){
res.sendFile('/signup/index.html', { root: '.' })
});

var port = 10000;
sign.listen(port);
console.log('Sign Up Portal Listening on port', port);





Are the JS files served correctly to the front end?
– Ankit Sharma
yesterday





Which JS files are you referring too? Do you mean the Node_Module files? they were installed using npm and the angular app says it loads when I run ng serve.
– Robert
yesterday





When you build the app, it creates a dist folder which has all the required JS files. Please verify if the JS files that are included in the index.html file are served from the server. Please check the network tab or the developer console if it reports an error.
– Ankit Sharma
yesterday





If I go into the folder where the app actually is located without starting express and simply build the app using ng serve it says app complied successfully. My issue is when I use express I can't load the app through express. I can point express to a index file located there but the actual angular functionality wont start. If I start everything up using express.
– Robert
13 mins ago





Thats precisely what I am asking you to check. Though, the index.html is served, are the other files that are required for angular functionality also being served? Try opening the index file after building, there you would find script tags. Please ensure those files are also served correctly. Unless they are served, your app wont work
– Ankit Sharma
10 mins ago





1 Answer
1



Refer to this link https://malcoded.com/posts/angular-backend-express



Update your code to the following:


const express = require('express');

const app = express();

app.listen(8500, () => {
console.log('Server started!');
});



You need to build the angular app if your angular version not 1.x


ng build



Also, I think this question is similar to your question:
Not able to view Angular app via express/heroku?





I rebooted the server to clear the ports started the express server first with the new adjusted code and then in a separate terminal in the app directory i ran ng serve port --8500 and i just get a error saying port 8500 is in use.
– Robert
yesterday





With the above code, your angular build code should run itself on port 8500
– Palsri
yesterday





yes this does not work. the angular app does not boot when I load express this way with that code.
– Robert
9 mins ago





I've updated my question with the full server.js code. If I do what you suggested the app doesn't load and it just ends up loading things on the wrong ports.
– Robert
21 secs ago






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

KVBsmFhT
UE MceTWrJC23rl7dpFfcVE

Popular posts from this blog

Rothschild family

Cinema of Italy