一次运行 Angular 4 + 节点 API



我是 angular 的新手,我需要使用 node js(与 Ms SQL 的 API 连接(使用 Angular4(Front( + REST API 开发 Web 应用程序。

现在我的困惑是,如果我单独开发两个项目会更好吗?

就个人而言,我更喜欢分别开发这两个项目。

但是我使用Visual Studio代码作为我的IDE,并且使用Visual Studio代码,我一次只能处理一个项目。

我想同时处理这两个项目。

有什么方法/任何其他IDE可以帮助我吗?或 有没有办法在视觉工作室代码中一次运行两个项目...?(我为此研究了很多,但没有找到任何有用的解决方案(

Angular CLI 有一个开发代理配置选项,可用于拦截对开发后端的调用并将其路由到 API。这可以让您独立处理项目以及利用@angular/cli工具。

您将在与angular-cli.json文件相同的级别创建一个名为proxy.conf.json的文件。假设开发中的节点 API 在http://localhost:3000端口3000上运行,并且您的 API 端点都在路径"/api"下,则proxy.conf.json的内容如下所示:

{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}

您可以根据需要设置任意数量的拦截,在这种情况下,它只会拦截对"/api"的调用,并将它们定向到在http://localhost:3000上运行的项目。

然后,您需要在 angular app 命令package.json修改npm start以使用代理:

"scripts": {
...
"start": "ng serve --proxy-config proxy.conf.json",
...
},

然后,您只需在不同的命令窗口中分别运行后端和前端。您可以使用库(例如并发(在开发中通过单个npm start运行多个命令。您将在基本节点 API 项目中设置npm start命令,如下所示:

"scripts": {
"start": "concurrently "./bin/www" "cd public && npm start"",
}

在此示例中,我的节点(快速(应用程序是从./bin/www激活的,我的 Angular 应用程序位于public文件夹中,但根据您的项目结构,这显然可能是不同的文件夹。如果后端节点 api 只是一个条目文件"start": "concurrently "node ./server.js" "cd public && npm start"",您的启动可能会更简单。

样品结构:

Project
server.js (back-end node API)
package.json (concurrently library and command added here)
public (angular front-end app)
src
.angular-cli.json
package.json (npm start updated to use proxy)
proxy.conf.json (proxy configuration goes here)

最新更新