如何使用Node.js服务器部署Angular 5应用

Question

I've written an Angular 5 application which gets its data from a node.js server. I have been able to deploy the application to my web server (which will run node.js at FastComet) but the server doesn't seem to work. I'm not sure if I have to deploy that separately, or if that gets included as part of the main ng build.

Here are my settings so that you can see, just in case they help:

package.json

{
  "name": "paracordcalc",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "concurrently --kill-others \"ng build --watch --no-delete-output-path\" \"node server.js\"",
    "build": "ng build && node server.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --prod --base-href /para-calc/"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "~5.0.0",
    "@angular/animations": "~5.0.0",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "body-parser": "~1.18.2",
    "bootstrap": "~3.3.7",
    "cookie-parser": "~1.4.3",
    "core-js": "~2.4.1",
    "debug": "~3.1.0",
    "express": "~4.16.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0",
    "ngx-image-gallery": "^1.3.1",
    "rxjs": "~5.5.2",
    "serve-favicon": "~2.4.5",
    "zone.js": "~0.8.14"
  },
  "devDependencies": {
    "@angular/language-service": "~5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "concurrently": "~3.5.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "~0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

server.js

    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');

    var routes = require('./server/routes/index');
    var items = require('./server/routes/items');
    var config = require('./server/routes/config');
    var errors = require('./server/routes/errors');

    var app = express();

    // view engine setup
    app.set('views', path.join(__dirname, '/server/views'));
    app.set('view engine', 'jade');

    app.use(favicon(path.join(__dirname, 'dist/favicon.ico')));
    app.use(logger('dev'));
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(cookieParser());
    app.use(express.static(path.join(__dirname, 'dist')));

    // app.use('/', routes);
    app.use('/api/config', config);
    app.use('/api/items', items);
    app.use('/api/errors', errors);
    app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
    });

    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
        var err = new Error('Not Found');
        err.status = 404;
        next(err);
    });

    // error handlers

    // development error handler
    // will print stacktrace
    if (app.get('env') === 'development') {
        app.use(function(err, req, res, next) {
            res.status(err.status || 500);
            res.render('error', {
                message: err.message,
                error: err
            });
        });
    }

    // production error handler
    // no stacktraces leaked to user
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: {}
        });
    });

    var debug = require('debug')('server');

    app.set('port', process.env.PORT || 3000);

    app.listen(app.get('port'));

    console.log('Listening on port: ' + app.get('port'));

    module.exports = app;

Here's a screenshot of what my server code structure looks like:

Am I Missing Anything?

It all runs ok in debug on my machine. I'm not sure if the node server is being deployed and just not run on the server, or what I need to do. I've Googled a LOT to try and find an answer and I can't see anything that makes sense.

I'm also trying to embed it into a Wordpress website page, which is another problem I can't find help for either, but that's for another discussion another day. I'm most likely going to try to embed it in an iFrame.

Any help that you can offer on deploying and running the server would be greatly appreciated. I've only been developing in Angular for about 3 months.

Answer 1

Put your server.js file and node_module folder in parallel to src directory inside angular app. So that it will be able hear nodejs operations of your angular project.

Here in this picture app.js is same as your server.js file. follow this hierarchy of architecture. Hope it will help you out.

Answer 2

From what I understand the problem here is with starting the NodeJS server. Could you please provide the commands that you are using via console and of course the output, respectively the error that the server returns. This I believe will show clearly what the reason for this problem actually is.

My best guess is that the ng binary is not deployed on the server which you can get resolve by contacting the FastComet Technical support team. I have heard that they are pretty responsive :)