一次运行Angular 4 +节点API

Question

我是angular的新手,我要求使用节点js(与Ms Sql的API连接)使用Angular4(Front)+ REST API开发Web应用程序.

现在我的困惑是,如果我单独开发这两个项目或者不是......它会更好吗？

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

但我使用visual studio代码作为我的IDE和visual studio代码,我一次只能处理一个项目.

我想一次同时处理这两个项目.

有什么方法/任何其他IDE可以帮助我吗？或者有没有办法在visual studio代码中一次运行两个项目......？(我已经研究了很多,但我找不到任何有用的解决方案)

任何帮助将受到高度赞赏

Answer 1

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

您将创建一个与文件proxy.conf.json处于同一级别的angular-cli.json文件.比方说,在发展的节点上的API端口运行3000时http://localhost:3000,你的API端点是所有在路径"/ API"的内容proxy.conf.json将如下所示:

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

您可以根据需要设置尽可能多的拦截,在这种情况下,它只会拦截对"/ api"的调用,并将它们指向运行的项目http://localhost:3000.

然后,您将需要修改npm start的package.json角度app命令的利用代理:

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

然后你只需要在不同的命令窗口中分别运行后端和前端.您可以使用库如同时在发展与单个运行多个命令npm start.您将npm start在基本节点API项目中设置您的命令,如下所示:

"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)

希望这有帮助!