No content in <app-root> element in browser using the command “node app.js”

Question

I created an Angular 7 application using the Angular CLI. I added my express server as one knows it. Afterwards I used the command "node server/app.js to start my app, but then in the browser in the "Elements" section there appears <app-root></app-root> without any content. As if the browser knew nothing about the actual Angular application. And when I run the ng serve command it seems to know about the actual Angular application, but there appears a 404 not found error in terms of post and get requests to the data server.

I already had a working Angular4 application with -I guess- the same setup and now same things seem to not work any longer. I researched all day long to find the solution but for nothing.

I think it is not advantageous to post all my files in here. Comment if I was wrong and I am going to edit them. Thanks in advance.

My app.js :

"use strict";
var bodyParser = require('body-parser');
const cors = require('cors');

// import { Observable } from 'rxjs';


var express = require("express");
var path = require("path");
var app = express();
app.use(cors());

const router = express.Router();

var nodeModulesPath = path.join(__dirname, "..", "node_modules");
app.use("/node_modules", express.static(nodeModulesPath));
var srcPath = path.join(__dirname, "..", "src");
app.use("/src", express.static(srcPath));
var serverPath = path.join(__dirname);
app.use("/server", express.static(serverPath));

// app.use(bodyParser.json());

var models = require("./models");
models.sequelize.sync({force:true}).then(function() {
  console.log("TABELLE ERSTELLT");
  // app.use(cors());
  app.use("/", router);


  app.use(bodyParser
    .urlencoded({extended:true})
  );
  app.use(bodyParser.json());
  console.log("after bodyparser");


  app.get("/", function(req,res){
    res.sendFile(path.join(__dirname, "views", "index.html"));
  });
  // app.get('/*', function(req, res) {
  //   res.sendFile(path.join(__dirname, "views", "index.html"));
  // });

  app.post("/goals/create",function (req, res){
    models.Goal.create({
        id: req.body.id,
        name: req.body.name,
        content: req.body.content,
        firstGivenValue: req.body.firstGivenValue,
        fittingValue: req.body.fittingValue,
        someone_would_like_to_implement: req.body.someone_would_like_to_implement,
        i_know_how_to_implement_it: req.body.i_know_how_to_implement_it

    }).then(function(obj){
        console.log(obj.id);
        // res.end("erfolgreich");
        res.redirect("/");
    })
    console.log(req.body);
  });
  app.get("/test",(req, res) => {
    res.end("test erfolgreich");
  });

  app.listen(3000);
});

Answer 1

You mention that you think it used to work for angular 4. Currently you're serving the index.html from the src folder. That's not going to work, your app is a typescript app and will need to be compiled one way or another; not to mention the Angular compiler. In the early days (I think pre 4, but not sure) angular serve also write the served files in a folder in your project, so you could just pick those JIT compiled files up and toss them on a web server, or express server. Those days are gone (with good reason for that matter, mostly performance).

You will now have to create an explicit build (ng build) and tell your express server (app.js) to target your dist folder.

TL;DR:

Run ng build

Replace

var srcPath = path.join(__dirname, "..", "src");
app.use("/src", express.static(srcPath));

With:

var distPath = path.join(__dirname, "..", "dist");
app.use("/dist", express.static(distPath));