MEAN Stack：当 Angular 在 Node 文件夹中时，如何从 Node 启动 Angular

Posted 2023-03-24

【中文标题】MEAN Stack：当 Angular 在 Node 文件夹中时，如何从 Node 启动 Angular

【英文标题】：MEAN Stack: How do you start Angular from Node, when Angular is inside Node folder

【发布时间】：2020-02-05 19:13:25

【问题描述】：

我有一个 MEAN 堆栈应用程序，我的 Node 安装在一个名为“myApp”的文件夹中。而且，我的 Angular 安装在“myApp”文件夹中，名为“Angular-src”。这是基础结构。因此，它在我的本地机器上完美运行。对于 Node，我在命令窗口中使用“nodemon”，在另一个命令窗口中使用 Angular 的“ng serve”。

但是，当我在 Heroku 上托管这个时，我开始遇到问题。我按照说明为 Prod 构建 Angular 应用程序，连接 MongoDB，部署它，当在浏览器中查看时，它表明我的 Node 服务器运行正常。但没有任何 Angular 位在运行的迹象。我在网上看了很多，但没有明确的答案。

我认为这与我在“脚本”部分中的“package.json”文件有关。我有两个“package.json”文件；一个在 Node 的“myApp”文件夹中，另一个在“Angular-src”中。这些是详细信息：

(1) 节点文件夹中的“package.json”-

  "name": "-----",
  "version": "0.0.0",
  "description": "-----",
  "main": "app.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app"
  ,
  "dependencies": 
    "express": "~4.17.1",
    "mongoose": "~5.6.0",
    "cors": "~2.8.5",
    "body-parser": "~1.19.0"
  ,
  "author": "Harsha W. & Sujeewa B.",
  "license": "ISC"

(2) angular-src 文件夹中的“package.json”（长文件被截断）-

  "name": "angular-src",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "heroku-postbuild": "ng build --prod",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies":  ...

(3) 我在 Node 文件夹中的 app.js -

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const dbConfig = require('./config/database');
const http = require('http');
const fs = require('fs');

// Connecting with mongo db
mongoose.Promise = global.Promise;

mongoose.connect(dbConfig.database, 
   useNewUrlParser: true
).then(() => 
      console.log('Database sucessfully connected')
   ,
   error => 
      console.log('Database could not connected: ' + error)
   
)
mongoose.set('useFindAndModify', false);

// Setting up port with express js
const coursesRoute = require('./controllers/courses.route');
/** other routes I have removed to unclutter the code **/

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded(
   extended: false
));

app.use(cors())

app.use('/api/course', coursesRoute);

app.get('/', (req, res) => 
  res.send("Hello HTTPS!")
)

// port
const port = process.env.PORT || 3000;

http.createServer(app).listen( port, () => 
  console.log('Listening on port ' + port);
);

** 我需要知道的是，当我的文件夹结构如上时，如何从我的节点提供 Angular。

【问题讨论】：

为什么需要交付应用程序的源代码？您可以只提供 Angular 的内置输出

感谢克里斯蒂安·特拉尼亚。感谢您的帮助。

【参考方案1】：

我认为您将源代码部署到 heroku 而不是构建版本。现在你的angular 服务器在4200 上运行，因为它正在开发中，但是一旦你将它部署在Heroku 上。您将只有一个端口可供使用（由 heroku 分配）。

构建 Angular 应用程序的命令是 ng build，但不要只是去运行这个命令（阅读它）。这将获取您的所有组件并在一个文件夹中构建几个文件，该文件夹类似于html files，然后您可以部署这些文件。

了解Deploying Angular App。 youtube 上有各种教程，您可以在其中找到如何在云端部署 MEAN 堆栈应用程序。

【讨论】：

我做了ng build --prod，我只能看到在 out 文件夹中创建了几个文件。对吗？

是的。它应该由index.html、main.js 和其他人组成

谢谢 Shivam，您的回答帮助很大。它还引导我观看 "youtube.com/watch?v=pDYhwfi7VU0" 上的 youtube 视频，该视频描述了整个场景。再次感谢。