使用environment为ng服务设置proxy.config.js属性

Question

Title对其进行了大量总结。我有一个proxy.conf.js文件，它在ng serve上被击中，我只想从环境ts文件或json文件中获取目标url，或者我现在并不在乎，我只需要一个地方来存储分别为其他文件提供信息的url。。。

所以environment.congif.ts(它不包括在任何配置中，只是一个文件，用于存储当前馈送environment.dev.ts的设置对象，并且无法馈送proxy.conf.js)；

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

然后CCD_ 3；

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

出于某种原因，我显然不理解(尤其是因为intellisense填充的路径对文件和属性都很好)，我在ng serve上出错；

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提供所需的位置

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

Answer 1

Hey Chris如果你需要配置代理，你只需要创建一个自定义文件调用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-你需要在你的软件包中进行一些更改.json

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

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

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

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

我希望这有帮助：)

Answer 2

所以这里的问题是typescript的版本及其缺乏导入vs需要支持。如果您使用的是类似v3的软件，则不会遇到同样的问题。谢谢你的光临！

Answer 3

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

我只是简单地将两个环境变量放在一个文件中。

---

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

Answer 4

内存中的transfile(我是如何解决的)

这里没有好的解决方案，因为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",
// ...
}
}

在您的软件包.json中(仅包括相关部分)。。。

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

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

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

一个非常相似的变体(transfilesrc/environments/environment.jsONLY，带JS导入的手写src/proxy.conf.js)也有类似的好处，但留给读者练习。