我已经创建了 Angular 4 应用程序,我可以使用它来运行它ng serve --open
它运行在localhost:4200
,
我想要的是我还使用创建了 apinodejs
现在在同一个角度项目中我想运行该 APIlocalhost:4200/api
所以我尝试过这样的事情
我的 Angular 4 和 Node JS 结构如下所示
/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
它运行我的角度应用程序,它很好,比我去的要好localhost:3000/app/api
它也工作得很好,
但是,当我更改角度应用程序时,它不会自动刷新我的应用程序,因为它当前正在运行节点应用程序以刷新它,我需要运行ng build
然后它将影响我对角度应用程序的新更改
所以,我想要的是运行ng serve --open
它将运行 Angular 应用程序,但不运行 Node JS api,因此想要运行两者,一旦我从 Angular 应用程序或 Node JS 应用程序中更改任何内容,它必须自动刷新。
您不能在同一端口上运行两个不同的应用程序。当你运行时,Angular-cli 在幕后使用 Nodejs 服务器(技术上它是 webpack-dev-server)ng serve
,这意味着该端口已被使用。
有两种可能的解决方案。
使用节点应用程序来提供静态前端文件。那么你就不能真正使用ng serve
(这可能是您实时运行时会做的事情)。
使用具有不同端口的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
反而。
这是文档的链接
以下是构建生产环境时的替代方案(上面的解决方案 1):
要构建您使用的生产环境ng build --prod
to 创建一个生产就绪的 Angular 构建然后(假设您在节点服务器上使用 Express),使用类似app.use(express.static('dist/'))
如中所解释的快速文档。我自己没有使用节点(我使用的是.NET Core),所以恐怕我无法提供更多细节。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)