Привет, Крис. Если вам нужно настроить прокси, вам нужно создать собственный файл с именем 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 serve прокси будет успешно работать

Надеюсь, это поможет :))

Таким образом, проблема здесь оказалась в версии машинописного текста и отсутствии в нем импорта или необходимости поддержки. Если вы используете что-то вроде v3, вы не столкнетесь с той же проблемой. Спасибо, что посмотрели!

Вы можете сделать это аналогичным образом https://stackblitz.com/edit/angular-2uz6n8

Я сделал это, просто поместив обе переменные среды в один файл.

Почему бы вам просто не использовать предопределенные переменные среды? Вы можете легко добавить некоторые свойства к environment.ts и environment.prod.ts и получить доступ к этим свойствам через import { environment } from './environment';, а затем будет использоваться просто envoronment.ANY_KEY_YOU_WANT соответствующий файл среды.

Транспайл в памяти (как я это решил)

Здесь нет хороших решений, потому что 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",
        // ...
    }
}

И в вашем package.json (только включая соответствующие части)...

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

И, конечно же, вы указываете свою конфигурацию angular на сгенерированный файл src/proxy.conf.js.

У этого есть несколько неприятных черт (генерирует src/environments/environment.js, немного медленнее при запуске, не запускается, если вы не обертываете свои команды, легче ошибиться), но, вероятно, это самый гибкий доступный вариант.

Очень похожий вариант (ТОЛЬКО транспиляция src/environments/environment.js, написание вручную src/proxy.conf.js с импортом JS) имеет те же преимущества, но оставлен читателю в качестве упражнения.