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

标题几乎概括了这一点。我有一个proxy.conf.js文件，它在

ng serve

上被点击，我只想从环境ts文件或json文件中获取目标url，或者我现在不在乎，我只想在一个地方存储分别提供给其他人的url

因此

environment.congif.ts

（它不包括在任何配置中，只是一个文件，用于存储当前为environment.dev.ts提供数据且无法为proxy.conf.js提供数据的设置对象）

然后

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

由于某种原因，我显然不明白（特别是因为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

---

附录：因此，与任何默认安装一样，environment.*.ts文件位于

/src/environments

中。proxy.conf.js与其他默认文件（如package.json或angular.json）一起位于项目根目录中。路径都是正确的，intellisense甚至会填充这些值，但无论出于何种原因，当从环境中导入const对象时proxy.conf.js都不会起作用（在构建时，就像我说的intellisense发现一切都很好）。正如标题所传达的，我唯一的问题是从环境ts文件中将url读入代理js文件，这样我就只有一个文件可以维护APIRL。

嘿，克里斯，如果你需要配置代理，那么你只需要创建一个自定义文件 调用proxyconfig.json并将其放入应用程序目录，该目录将位于应用程序的src文件夹之外

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

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

你也可以用类似的方法来做

我只需将两个环境变量放在一个文件中就可以做到这一点

---

为什么不直接使用预定义的环境变量呢？

---

您可以轻松地向

environment.ts

和

environment.prod.ts

添加一些属性，并通过

import{environment}从“/environment”访问这些属性

然后简单地

环境。将使用您想要的任何密钥

相应的环境文件。

因此这里的问题是typescript版本及其缺少导入vs require支持。如果您使用类似v3的任何东西，您将不会遇到相同的问题。谢谢你的关注

内存传输文件（我是如何解决的） 这里没有好的解决方案，因为Angular希望环境文件为TypeScript，代理配置为JavaScript（或JSON）。有几种方法可以弥补这一差距。我的方法是在内存中传输环境文件——它们通常很小、简单、包含良好，而且您已经安装了TypeScript。这是我的

src/proxy.conf.js

的顶部，在实际使用

环境中的值之前：

/*
*根据此处的参考：
* https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#a-简单变换函数
*
*加载、传输和执行Typescript模块。
*这是非常简单的，对于environment.ts文件来说就足够了。
*/
函数加载（文件名）{
常数fs=要求（'fs'）；
const ts=require（'typescript'）；
//加载并传输到JS
让ts_code=fs.readFileSync（文件名为“utf-8”）；
让js_code=ts.transpileModule（ts_code{
编译器选项：{module:ts.ModuleKind.CommonJS}
}).输出文本；
//执行JS。我们需要“导出”才能存在，否则会中断。
让导出={}；
返回评估（js_代码）；
}
const-environment=load_ts（'./src/environments/environment.ts'）；
// ...

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


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

/*src/proxy.conf.ts*/
从“./environments/environment”导入*作为环境；
出口={
“/api”：{
目标：（环境）.api|U服务器| |'http://example.com',
来源：对，
日志级别：“调试”，
// ...
}
}

在您的package.json中（仅包括相关部分）

{
“脚本”：{
“开始”：“npm运行代理配置和ng服务”，
“proxy config”：“tsc--types节点--module commonjs src/proxy.conf.ts”
}
}

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

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

一个非常类似的变体（仅Transfile
src/environments/environment.js
，带有js导入的手写
src/proxy.conf.js
）也有类似的好处，但留给读者作为练习。
你好！是的，我有代理，如果我
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)
........