Нет контента вэлемент в браузере с помощью команды "node app.js" - PullRequest
Новая
       7

Нет контента вэлемент в браузере с помощью команды "node app.js"

0 голосов
/ 21 ноября 2018

Я создал приложение Angular 7, используя Angular CLI.Я добавил свой экспресс-сервер, как известно.Впоследствии я использовал команду "node server / app.js для запуска моего приложения, но затем в браузере в разделе" Элементы "появляется <app-root></app-root> без какого-либо содержимого. Как будто браузер ничего не знал о реальном приложении Angular. Икогда я запускаю команду ng serve, кажется, что она знает о реальном приложении Angular, но появляется ошибка 404 с точки зрения отправки и получения запросов к серверу данных.

У меня уже был рабочий 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);
});

1 Ответ

0 голосов
/ 22 ноября 2018

Вы упоминаете, что, по-вашему, он работал для angular 4. В настоящее время вы обслуживаете index.html из папки src.Это не сработает, ваше приложение - это машинописное приложение, и его нужно будет так или иначе скомпилировать;не говоря уже о угловом компиляторе.В первые дни (я думаю, до 4, но не уверен) угловая подача также записывает обслуживаемые файлы в папку в вашем проекте, так что вы можете просто выбрать эти скомпилированные файлы JIT и выбросить их на веб-сервер или экспресс-сервер.Эти дни прошли (и на то есть веские причины, в основном производительность).

Теперь вам нужно будет создать явную сборку (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));
...