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

Question

标题几乎总结了它。我有一个在ng serve上受到攻击的proxy.conf.js文件，我只是想从环境ts文件或json文件中获取目标url，或者我现在并不关心，我只是想要一个地方存储分别为其他人提供的网址...

所以environment.congif.ts（不包含在任何配置中，只是一个文件来存储当前提供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

由于某些原因，我显然不明白（特别是因为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提供所需的位置

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

Answer 1

嘿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-你需要在package.json中进行一些更改

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

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

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

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

我希望有帮助:)）

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这样的东西，你将不会遇到同样的问题。谢谢你的期待！