使用环境为 ng serve 设置 proxy.config.js 属性

Question

标题几乎概括了它。我有一个 proxy.conf.js 文件在 ng serve 上被命中，我只想从环境 ts 文件或 json 文件中获取目标 url，或者我在这一点上我真的不在乎，我只想要一个地方来存储分别为其他人提供食物的 URL...

因此 environment.congif.ts（未包含在任何配置中，只是一个用于存储设置 object 的文件，该文件当前提供 environment.dev.ts 并且无法提供 proxy.conf.js );

export const environment = {
    production: false,
    apiUrl: 'http://localhost:12345'
};

然后proxy.conf.js;

var settings = require('./src/environments/environment.config');

const PROXY_CONFIG = [{
    "/restapi/*": {
      "target": settings.environment.apiUrl,
      "secure": false,
      "changeOrigin": true,
      "logLevel": "debug"
    }
}]

module.exports = PROXY_CONFIG

出于某种原因，我显然不明白（特别是因为智能感知为文件和属性填写的路径都很好）我在 ng serve;[=21 上出错=]

Cannot find module './src/environments/environment.config'
Error: Cannot find module './src/environments/environment.config'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
........

所以我的问题是，为什么不能这样解决？我只想要一个文件来设置目标 URL，它从 environment.config.ts

提供所需的位置

ADDENDUM ：所以 environment.*.ts 文件位于 /src/environments 中，就像任何默认安装一样。 proxy.conf.js 与其他默认文件（如 package.json 或 angular.json 位于项目根目录中。路径都是正确的，intellisense 甚至会填充值，但无论出于何种原因，proxy.conf.js 在从环境中导入 const object 时都不会很好地发挥作用（在构建时，尽管就像我说的那样，intellisense 发现一切都只是美好的）。所以就像标题传达的那样，我遇到的唯一问题是从环境 ts 文件中将 url 读入代理 js 文件，这样我只有一个文件来维护 apiurl。

Answer 1

嘿克里斯如果你需要配置代理，你需要创建一个自定义文件调用 proxyconfig.json 并将其放在应用程序目录中，该目录将超出您应用程序的 src 文件夹。

1- 在配置代理文件之前模拟您需要从此端点获取一些数据

this.http.get('http://locahost:3000/api/v1/people')

2- proxyconfig.json 将包含此 json

{
  "/api/*": { // 
    "target": "http://localhost:3000", // the target url for backend endpoint
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

3- 您需要对 package.json

进行一些更改

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

4- 您服务中的端点应更改为

this.http.get('/api/v1/people')

5- 运行 ng 服务代理将成功运行

希望对您有所帮助 :))

Answer 2

你可以用类似的方式来做https://stackblitz.com/edit/angular-2uz6n8

我只是通过将两个环境变量放在一个文件中来完成此操作。

为什么不直接使用预定义的环境变量？您可以轻松地向 environment.ts 和 environment.prod.ts 添加一些属性，并通过 import { environment } from './environment'; 访问这些属性，然后只需 envoronment.ANY_KEY_YOU_WANT 将使用相应的环境文件。

Answer 3

所以这里的问题原来是打字稿的版本及其缺乏导入与需要支持。如果您使用的是 v3 之类的软件，则不会遇到同样的问题。感谢观看！

Answer 4

内存转译（我是怎么解决的）

这里没有好的解决方案，因为Angular希望环境文件是TypeScript，代理配置是JavaScript（或JSON).有几种方法可以弥合这一差距。我的方法是在内存中转译环境文件——它们通常很小、简单且包含良好，而且无论如何你都安装了 TypeScript。这是我的 src/proxy.conf.js 的顶部，在实际使用 environment:

的值之前

/*
 * Based on reference here:
 * https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
 *
 * Loads, transpiles, and executes a Typescript module.
 * This is very simple, literally just enough for an environment.ts file.
 */
function load_ts(filename) {
    const fs = require('fs');
    const ts = require('typescript');

    // Load and transpile to JS
    let ts_code = fs.readFileSync(filename, 'utf-8');
    let js_code = ts.transpileModule(ts_code, {
        compilerOptions: { module: ts.ModuleKind.CommonJS }
    }).outputText;

    // Execute JS. We need 'exports' to exist, or this breaks.
    let exports = {};
    return eval(js_code);
}

const environment = load_ts('./src/environments/environment.ts');

// ...

这在运行需要时有一些优势，与 ng serve 无缝连接（假设您在 angular.json 中指向它），并且通常具有对工作流程的影响很小。这也意味着如果您需要将代理配置设置为 JavaScript 而不是 JSON （对于 JS 独有的功能），考虑起来非常简单。但它假设您的 environment.ts 文件没有做任何太令人兴奋或聪明的事情 - 通常是一个公平的假设，但如果您在 environment.ts 中进行导入，您可能需要不同的方法。

带外编译（替代）

如果您将命令包装在 npm run ... 中而不是直接使用 ng serve，您可以选择在 TypeScript 中编写代理配置，并在运行之前编译它 ng serve:

/*   src/proxy.conf.ts   */
import * as environment from './environments/environment';
  
export = {
    '/api': {
        target: (<any>environment).api_server || 'http://example.com',
        changeOrigin: true,
        logLevel: "debug",
        // ...
    }
}

并且在你的package.json（只包括相关部分）...

{
  "scripts": {
    "start": "npm run proxy-config && ng serve",
    "proxy-config": "tsc --types node --module commonjs src/proxy.conf.ts"
  }
}

当然，您将 angular 配置指向生成的文件 src/proxy.conf.js。

这有一些令人讨厌的特征（生成 src/environments/environment.js，启动时有点慢，不会运行，除非你包装你的命令，更容易出错），但可能是最灵活的选项。

一个非常相似的变体（仅转译 src/environments/environment.js，通过 JS 导入手写 src/proxy.conf.js）具有相似的优点，但留作 reader 的练习。

使用环境为 ng serve 设置 proxy.config.js 属性

Use environment to set proxy.config.js property for ng serve

angular

angular-cli

angular-module

内存转译（我是怎么解决的）

带外编译（替代）