javascript - 一次运行 Angular 4 + Node API

Question

我是 Angular 的新手，我需要使用 Node js(与 Ms Sql 的 API 连接)使用 Angular4(前端)+ REST API 开发 Web 应用程序。

现在我的困惑是，如果我分别开发这两个项目是否更好......？

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

但我使用 visual studio code 作为我的 IDE，使用 visual studio code，我一次只能处理一个项目。

我想同时从事这两个项目。

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

Answer 1

Angular CLI 有一个 development proxy configuration option可用于拦截对开发后端的调用并将它们路由到 API。这可以让您独立处理项目并利用 @angular/cli 工具。

您将在与 angular-cli.json 文件相同的级别创建一个名为 proxy.conf.json 的文件。假设您开发中的 Node 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",
   ...
},

然后你只需要在不同的命令窗口中分别运行后端和前端。您可以使用诸如 concurrently 之类的库使用单个 npm start 在开发中运行多个命令。您将在基本 Node API 项目中设置您的 npm start 命令，如下所示:

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

在此示例中，我的 Node (express) 应用程序是从 ./bin/www 激活的，我的 Angular 应用程序位于 public 文件夹中，但这显然可以根据您的项目结构是不同的文件夹。如果后端 Node 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)