内存中的转储（如何解决）

Question

标题几乎总结了一下。我有一个{。{1}}命中的proxy.conf.js文件，我只想从环境ts文件或json文件中获取目标网址，或者我现在不在乎，我只想在一个地方存储分别用于其他地方的网址...

因此ng serve（未包含在任何配置中，只是一个文件，用于存储当前提供给environment.dev.ts且无法提供给proxy.conf.js的设置对象）；

environment.congif.ts

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

proxy.conf.js

出于某种原因，我显然不理解（特别是因为intellisense填充的路径对于文件和属性都很好），我在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

所以我的问题是，为什么不能这样解决？我只希望一个文件在其上设置目标URL，从而从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) ........

中获取所需的位置

添加：因此，环境。*。ts文件位于environment.config.ts中，就像任何默认安装一样。 proxy.conf.js与其他默认文件（如package.json或angular.json）位于项目根目录中。路径都是正确的，intellisense甚至会填充值，但是出于任何原因，从环境中导入const对象时proxy.conf.js都不能很好地工作（在构建时，尽管我说过intellisense发现一切都很好）。因此，就像标题所传达的一样，我唯一的问题是将URL从环境ts文件读取到代理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-运行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

因此，这里的问题原来是打字稿的版本，并且缺少导入vs需要支持。如果您使用的是类似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专有功能）为JavaScript，则考虑起来非常简单。但是它假设您的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"
  }
}

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

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

一个非常相似的变体（仅转换src/environments/environment.js，带有JS导入的手写src/proxy.conf.js）具有相似的优点，但留给读者练习。

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

4 个答案:

内存中的转储（如何解决）

带外编译（替代）