一次运行Angular 4 +节点API

我是angular新的,我有要求开发一个Web应用程序与Angular4(前)+ REST API使用节点js(与Ms Sql API连接)。

现在我的困惑是,如果我分别开发这两个项目,是不是更好?

就个人而言,我更愿意分开开发这两个项目。

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

我想一次在两个项目上工作。

有什么方法/任何其他IDE可以帮助我吗? 还是有什么办法一次运行两个项目在Visual Studio代码…?(我已经研究了很多,但我没有find任何有用的解决scheme)

任何帮助将不胜感激

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

您将创build一个名为proxy.conf.json的文件,其名称与angular-cli.json文件的级别相同。 假设开发中的节点API在端口3000上运行,位于http://localhost:3000 ,API端点全部位于“/ api”path下, 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\"", } 

在这个例子中,我的节点(express)应用程序是从./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) 

希望有帮助!