Question

我是NodeJs和Angular的新手，并且我已经使用{{3}}创建了简单的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应用程序使用{ {1}}。如果我同时安装了Nodejs和Angular，那么如何运行该应用程序。

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

我的package.json文件：

ng serve

我的app.js文件：

{
  "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"
}

Answer 1

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

Here's a good article for these issues.

Answer 2

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

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

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

除非您需要server side rendering（我对Angular SSR几乎一无所知），否则将Angular嵌入nodeJs应用程序可能不会带来任何好处。 If you follow the Angular deploy guide，您将看到服务和部署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

You need to make some changes in app.js as shown below. And also, angular-cli should be installed. And then run the following commands:

ng build (dist folder will get generated automatically)
node app

Your app.js file should look like the following

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}`));

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

4 个答案: