如何 运行 angular 4 app 和 nodejs api 在同一个端口 4200 上用于生产和开发？
how to run angular 4 app and nodejs api on same port 4200 for both production and development?
我已经创建了 angular 4 个应用程序，我可以 运行 使用 ng serve --open 它 运行s on localhost:4200 ，
我想要的是我还在同一个 angular 项目中使用 nodejs 创建了 api 现在我想 运行 API 在 localhost:4200/api 所以我试过这样的东西
我的 angular 4 和 nodejs 结构看起来像这样
/dist
/server
/routes
/server
/src
app.js
package.json
在app.js我用
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));
一旦我 运行 使用 nodemon app.js 并进入 localhost:3000 它 运行 我的 angular 应用程序并且它很好并且比我进入 localhost:3000/app/api 它也很好用，
但是当我更改 angular 应用程序时，它不会自动刷新我的应用程序，因为它是 运行ning 节点应用程序当前要刷新它我需要 运行 ng build 和它会影响我对 angular app
的新更改
所以，我想要的是 运行 ng serve --open 它会 运行 angular app 但不是 node js api 所以想要 运行 一旦我从 angular 应用程序或节点 js 应用程序中更改任何内容，它必须自动刷新。
您不能在同一个端口上 运行 有两个不同的应用程序。 Angular-cli 在您 运行 ng serve 时在幕后使用 nodejs 服务器（技术上它是 webpack-dev-server），这意味着该端口已被使用。
有两种可能的解决方案。
使用您的节点应用程序来提供静态前端文件。那么你就不能真正使用 ng serve（这可能是你在 运行ning 直播时会做的）。
使用不同端口的nodejs，并使用Angular的代理配置，让Angular认为api端口实际上是4200（这是可能在开发期间最好）。
我认为这主要是开发过程中的一个问题，因为您很可能不会（也不应该）使用 ng serve live，所以选项 2 是我最好的建议。
要配置代理，请在 angular 应用程序根目录中创建一个名为 proxy.config.json 的文件，内容如下：
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}
那么当你 运行 ng serve 时，你 运行 就用 ng serve --proxy-config proxy.config.json 代替。
Here's a link to the documentation
这是为生产构建的替代方案（上面的解决方案 1）：
要在生产环境中构建，您可以使用 ng build --prod 到 create a production ready Angular build and then (assuming you use Express on your node server), use something like app.use(express.static('dist/')) as explained in the Express documentation。我自己没有使用节点（我使用的是 .NET Core），所以我恐怕无法提供更多细节。
丹尼尔·卡根 (Daniel Kagan) 在 medium 上有一篇很棒的博客解释了所有内容，这里是 link。
Hot deploy它解释了客户端热部署我添加了一些代码来使客户端和服务器热部署。
本回答纯粹为了开发热重载
第一步.
安装concurrently and nodemon
npm i 同时
npm i nodemon
您也可以使用 -g 标志进行全局安装
第二步。
打开你的服务器 package.json 文件，
并向其添加以下四行。 注意 我在客户端文件夹中有我的 angular 代码所以我做了 cd 客户端
"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""
如果您不想检查节点应用程序，请删除 --inspect 标志。
第三步。
转到您的 angular 文件夹并创建文件 proxy.conf.json 在文件中添加以下行。
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}
第四步。
在 angular 的 package.json 文件
中添加以下命令
"start": "ng serve --proxy-config proxy.conf.json"
第五步。
在服务器的 public 文件夹中创建 angular 构建输出目录。为此，请转到 angular.json 将构建输出路径更改为 ../public 以下是 JSON 片段。
"options": {
"outputPath": "../public",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
第六步
确保您的 node express 服务器 app.js 文件从 public 文件夹读取静态文件。
app.use(express.static(path.join(__dirname, 'public')));
第七步。
npm 运行 开发
完成转到 http://localhost:4200 你可以在那里看到你的应用程序 :) 所有对 /api 的调用都将到达 node express 服务器。
对服务器或客户端的任何更改都将自动热部署。
注意 我使用 Express application generator to create my server and Angular CLI 创建了 angular 应用程序。如果您以其他方式执行此操作，则某些文件可能不存在
1.first 构建你 angular 6 个应用程序
运行 ng build --watch
2.from nodejs 应用程序
写这个中间件
app.use(express.static(path.join(__dirname, './client/dist/client')));
因为指向 client/dist/client 的文件夹是 angular 6 app.
的构建文件夹
然后 运行 nodemon --inspect app.js
确保有这样的文件夹层次结构
/myproject
/client
/dist
/client
/....
/index.html
/app.js
/.....
从app.js监听你想要运行的端口
和 运行 localhost:portno
希望这对您有所帮助
我已经创建了 angular 4 个应用程序，我可以 运行 使用 ng serve --open 它 运行s on localhost:4200 ，
我想要的是我还在同一个 angular 项目中使用 nodejs 创建了 api 现在我想 运行 API 在 localhost:4200/api 所以我试过这样的东西
我的 angular 4 和 nodejs 结构看起来像这样
/dist
/server
/routes
/server
/src
app.js
package.json
在app.js我用
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/app/api', apiRoutes);
const port = process.env.PORT || '3000';
server.listen(port, () => console.log(`API running on localhost:${port}`));
一旦我 运行 使用 nodemon app.js 并进入 localhost:3000 它 运行 我的 angular 应用程序并且它很好并且比我进入 localhost:3000/app/api 它也很好用，
但是当我更改 angular 应用程序时，它不会自动刷新我的应用程序，因为它是 运行ning 节点应用程序当前要刷新它我需要 运行 ng build 和它会影响我对 angular app
所以，我想要的是 运行 ng serve --open 它会 运行 angular app 但不是 node js api 所以想要 运行 一旦我从 angular 应用程序或节点 js 应用程序中更改任何内容，它必须自动刷新。
您不能在同一个端口上 运行 有两个不同的应用程序。 Angular-cli 在您 运行 ng serve 时在幕后使用 nodejs 服务器（技术上它是 webpack-dev-server），这意味着该端口已被使用。
有两种可能的解决方案。
使用您的节点应用程序来提供静态前端文件。那么你就不能真正使用
ng serve（这可能是你在 运行ning 直播时会做的）。使用不同端口的nodejs，并使用Angular的代理配置，让Angular认为api端口实际上是4200（这是可能在开发期间最好）。
我认为这主要是开发过程中的一个问题，因为您很可能不会（也不应该）使用 ng serve live，所以选项 2 是我最好的建议。
要配置代理，请在 angular 应用程序根目录中创建一个名为 proxy.config.json 的文件，内容如下：
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}
那么当你 运行 ng serve 时，你 运行 就用 ng serve --proxy-config proxy.config.json 代替。
Here's a link to the documentation
这是为生产构建的替代方案（上面的解决方案 1）：
要在生产环境中构建，您可以使用 ng build --prod 到 create a production ready Angular build and then (assuming you use Express on your node server), use something like app.use(express.static('dist/')) as explained in the Express documentation。我自己没有使用节点（我使用的是 .NET Core），所以我恐怕无法提供更多细节。
丹尼尔·卡根 (Daniel Kagan) 在 medium 上有一篇很棒的博客解释了所有内容，这里是 link。 Hot deploy它解释了客户端热部署我添加了一些代码来使客户端和服务器热部署。
本回答纯粹为了开发热重载
第一步.
安装concurrently and nodemon
npm i 同时
npm i nodemon
您也可以使用 -g 标志进行全局安装
第二步。
打开你的服务器 package.json 文件， 并向其添加以下四行。 注意 我在客户端文件夹中有我的 angular 代码所以我做了 cd 客户端
"buildclient": "cd client && ng build",
"runclient": "cd client && npm start",
"devstart": "nodemon --inspect ./bin/www",
"dev": "npm run buildclient & concurrently --kill-others \"npm run runclient\" \"npm run devstart\""
如果您不想检查节点应用程序，请删除 --inspect 标志。
第三步。
转到您的 angular 文件夹并创建文件 proxy.conf.json 在文件中添加以下行。
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"changeOrigin": true
}
}
第四步。
在 angular 的 package.json 文件
中添加以下命令"start": "ng serve --proxy-config proxy.conf.json"
第五步。
在服务器的 public 文件夹中创建 angular 构建输出目录。为此，请转到 angular.json 将构建输出路径更改为 ../public 以下是 JSON 片段。
"options": {
"outputPath": "../public",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
第六步
确保您的 node express 服务器 app.js 文件从 public 文件夹读取静态文件。
app.use(express.static(path.join(__dirname, 'public')));
第七步。
npm 运行 开发
完成转到 http://localhost:4200 你可以在那里看到你的应用程序 :) 所有对 /api 的调用都将到达 node express 服务器。
对服务器或客户端的任何更改都将自动热部署。
注意 我使用 Express application generator to create my server and Angular CLI 创建了 angular 应用程序。如果您以其他方式执行此操作，则某些文件可能不存在
1.first 构建你 angular 6 个应用程序 运行 ng build --watch
2.from nodejs 应用程序
写这个中间件
app.use(express.static(path.join(__dirname, './client/dist/client')));
因为指向 client/dist/client 的文件夹是 angular 6 app.
然后 运行 nodemon --inspect app.js
确保有这样的文件夹层次结构
/myproject
/client
/dist
/client
/....
/index.html
/app.js
/.....
从app.js监听你想要运行的端口 和 运行 localhost:portno
希望这对您有所帮助