Угловые 2 Конфигурации окружения Webpack

Question

Я хотел бы настроить мою сборку Webpack, чтобы я мог объявить import { environment } from './environments/environment' в своих компонентах Angular 2 и импортировать нагрузку environment.ts во время разработки, но environment.prod.ts в процессе производства. Как я могу сказать Webpack заменить импорт во время сборки?

Я ищу что-то очень похожее на то, как проекты, созданные с помощью Angular CLI, обрабатывают конфигурации окружения. К сожалению, я бы предпочел не использовать CLI еще, поскольку он все еще находится в стадии бета-тестирования, и я также не оборачивался вокруг того, как работает проект и как продлить его сборку.

Я также хочу, чтобы избежать разрастания условных операторов в течение всего исходного кода, поэтому без использования process.env.NODE_ENV в if-statement везде, где я хочу импортировать файл окружения.

Answer 1

Хорошо, я наконец-то выяснил, как это сделать. Во-первых, окружающая среда файлы:

environment.interface.ts:

export interface Environment { 
    apiRoot: string, 
    target: string 
} 

environment.dev.ts:

import { Environment } from './environment.interface'; 

export const environment: Environment = { 
    target: 'dev', 
    apiRoot: 'http://www.dev.api.com' 
} 

environment.prod.ts:

import { Environment } from './environment.interface'; 

export const environment: Environment = { 
    target: 'prod', 
    apiRoot: 'http://www.api.com' 
} 

среды .ts:

export { environment } from './environment.dev'; 

Затем, импорт в угловых компонентов, как: нормальная

import { environment } from './environments/environment'; 

Наконец, используя NormalModuleReplacementPlugin в конфигурации WebPack:

webpack.prod.js:

module.exports = webpackMerge(commonConfig, { 
    ... 
    plugins: [ 
    ... 
    new webpack.NormalModuleReplacementPlugin(/\.\/environment\.dev/, './environment.prod') 
    ] 
}); 

Первый Параметр в NormalModuleReplacementPlugin является Regex, который соответствует environment.dev в environment.ts. Второй параметр - это модуль конфигурации, который вы хотите использовать в сборке.

Я уверен, что это можно сделать немного более изящным, используя некоторые переменные среды, но это хорошая отправная точка.