中没有内容 <app-root> 使用命令“ node app.js”在浏览器中添加元素

Question

我使用Angular CLI创建了Angular 7应用程序。 我添加了我的快递服务器，因为有人知道。 之后，我使用命令“ node server / app.js”启动我的应用程序，但是随后在浏览器的“元素”部分中，出现了<app-root></app-root>没有任何内容。好像浏览器知道当我运行ng serve命令时，似乎了解了实际的Angular应用程序，但是在发布和获取对数据服务器的请求方面出现了404 not found错误。

我已经有一个工作正常的Angular4应用程序-我猜想-相同的设置，现在似乎相同的东西不再起作用。 我整日研究以找到解决方案，但一无所获。

我认为将我的所有文件都放在这里不利。 如果我错了，请发表评论，然后我将对其进行编辑。 提前致谢。

我的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

您提到您认为它曾经适用于angular4。当前您正在从src文件夹提供index.html。 那是行不通的，您的应用是打字稿应用，需要以一种或另一种方式进行编译； 更不用说Angular编译器了。 在早期（我认为是Pre 4，但不确定），角度服务还会将服务的文件写入项目中的文件夹中，因此您可以选择那些JIT编译的文件并将其扔到Web服务器或Express服务器上。 那些日子已经一去不复返了（这有充分的理由，主要是性能）。

现在，您将必须创建一个显式构建（ng build），并告诉快速服务器（app.js）以dist文件夹为目标。

TL; DR：

运行ng build

更换

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

附：

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