代码之家 › 专栏 › 技术社区 › Chris W.

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

angular-module angular-cli angular

Chris W. · 技术社区 · 6 年前

标题差不多概括了这一点。我有一个proxy.conf.js文件 ng serve 我只想从环境ts文件或json文件中获取目标url,或者我现在不太在意,我只想在一个地方存储分别为其他文件提供信息的url。。。

所以 environment.congif.ts (它不包含在任何配置中,只是一个文件,用于存储当前为environment.dev.ts提供数据并且无法为proxy.conf.js提供数据的settings对象);

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对文件和属性都很好地填充了路径),我得到了错误 天然气发球 ;

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对象时都不会表现得很好(在构建时,尽管正如我所说,intellisense发现一切都很好)。所以就像标题所传达的一样,我唯一的问题是从环境ts文件将url读入proxy js文件,这样我只有一个文件来维护apiurl。

2 回复 | 直到 6 年前

Ahmed hussien 6 年前

嘿克里斯如果你需要配置代理你只需要创建一个自定义文件调用proxyconfig.json并将其放在app目录中,该目录将不在应用程序的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 service代理将成功工作

我希望这有帮助:))

Sergey 6 年前

你也可以用同样的方法 https://stackblitz.com/edit/angular-2uz6n8

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

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

Chris W. 6 年前

所以这里的问题是typescript的版本和它缺少import-vs需要支持。如果你使用的是类似v3的东西,你不会遇到同样的问题。谢谢你的帮忙!