中沒有內容 <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));