如何在同一文件夹中安装Angular和Nodejs

Question

我是NodeJs和Angular NodeJs ，我使用此链接创建了简单的Nodejs应用程序，但是没有关于如何在Nodejs旁边安装Angular的示例。 我试图运行ng new angular-crud在根文件夹，它创建angular-crud的内夹root文件夹。 现在我有2个node_modules文件夹，第一个在root文件夹中，第二个在angular-crud文件夹中。

a） 安装 ::如何安装Angular，以便始终只有一个node_modules文件夹。

b） RUN :: Nodejs应用程序是使用命令node app.js运行的，其中app.js是entry point但是另一方面Angular应用程序是使用ng serve运行的。 如果我同时安装了Nodejs和Angular，那么如何运行该应用程序。

c） 结构 ::一起使用Node和Angular时，理想的文件夹结构应该是什么。

我的package.json文件：

{
  "name": "test-na",
  "version": "0.0.1",
  "dependencies": {
    "body-parser": "^1.18.3",
    "cors": "^2.8.4",
    "express": "^4.16.3"
  },
  "description": "test",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

我的app.js文件：

const bodyParser = require('body-parser');
const express = require('express');
const cors = require('cors');
const app = express();

var corsOptions = {
    origin: 'http://example.com',
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
};

app.use(bodyParser.json());
app.use(cors(corsOptions));


app.route('/api/cats').get((req, res) => {
    res.send({
        cats: [{ name: 'lilly' }, { name: 'lucy' }]
    });
});

app.route('/api/cats').post((req, res) => {
    res.send(201, req.body);
});

app.route('/api/cats/:name').get((req, res) => {
    const requestedCatName = req.params['name'];
    res.send({ name: requestedCatName });
});

app.route('/api/cats/:name').put((req, res) => {
    res.send(200, req.body);
});

app.route('/api/cats/:name').delete((req, res) => {
    res.sendStatus(204);
});

app.listen(8000, () => {
    console.log('Server started');
});

Answer 1

将客户端和服务器代码分成两个独立的目录。

这是有关这些问题的好文章。

Answer 2

Angular旨在创建单页应用程序：如果您不执行服务器端渲染 ，则可能不应该将Angular应用程序嵌入到nodeJs应用程序中。

相反，Angular应用程序应该位于其自己的文件夹中（并且通常位于其自己的服务器中），并通过触发API调用与nodeJs应用程序连接。

例如，您可以将域https://acme.com 静态地服务于Angular应用程序，并且您的Angular应用程序将针对https://acme.com/api/v1/执行api请求。

除非您需要服务器端渲染 （我对Angular SSR几乎一无所知），否则将Angular嵌入nodeJs应用程序可能不会带来任何好处。 如果您遵循Angular部署指南 ，将会看到用于服务和部署Angular应用程序的预期形式是从Apache或Ngnx静态服务Angular应用程序。

Answer 3

它非常简单，首先使用angular cli创建新的角度项目，或者您也可以克隆现有的角度项目。 然后添加名为server的文件夹，它将包含您所有的节点服务器文件。 让app.js文件保存在根目录（服务器文件夹外部）中

您的文件夹结构将如下所示：

e2e            
src           
server        
node_modules    
karma.conf.js  
package.json  
tslint.json  
tsconfig.json  
protracter.conf.js  
README.md  
app.js  

然后，您可以将节点服务器的必需依赖项（例如express，body-parser）添加到package.json中。

通过节点服务器提供角度服务
将以下行添加到app.js文件中，dist文件夹将是您的构建文件夹，该文件夹将在执行ng build时创建

app.use(express.static(path.join(__dirname, '/dist')));

Answer 4

您需要对app.js进行一些更改，如下所示。 并且，应安装angular-cli。 然后运行以下命令：

1. ng build（dist文件夹将自动生成）
2. 节点应用

您的app.js文件应如下所示

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();


// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));

// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'dist')));

// Send all other requests to the Angular app
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

//Set Port
const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`Running on localhost:${port}`));