Need help on generating environment specific api config

[hussaintamboli]

Hey, I have been using generator-angular-webpack-es6 for a week now.

I really like how it's structured in a context of separation of concerns.

I have one problem. My api.config.json

{
    "production": {
        "APIConfig": {
            "ProductService": "jjjjjjjjj",
            "CartService": "kkkkkkk"
        }
    },
    "development": {
        "APIConfig": {
            "ProductService": "lllllllll",
            "CartService": "mmmmm"
        }
    }
}

I want webpack to create angular config for the enviornment specific build.

In gulp I had a task for this

gulp.task('configure-environment', configure);
function configure() {
  return gulp.src('conf/app.env.config.json')
    .pipe(gulpNgConfig('MyMD.config', {
      environment: process.env.NODE_ENV || "development"
    }))
    .pipe(gulp.dest(path.join(conf.paths.src)));
}

How do I do this with Webpack?

[STUkh]

How do I do this with Webpack?

Try webpack.DefinePlugin plugin. There is simple example in global.json webpack config file

[hussaintamboli]

Fixed

new webpack.DefinePlugin({
    'NODE_ENV': JSON.stringify(NODE_ENV),
    'API_CONFIG': JSON.stringify(require(path.join(_path, 'config/apiurls.json'))[NODE_ENV])
})

Thanks!

[basav22]

Hi,

One more way - Using Alias like

 `alias: {
    ////////////////////////////////////////////////////////////////
    // Created alias for environment specific configuration for APIs
    ////////////////////////////////////////////////////////////////
    _envConfig: path.join(_path, 'config', 'apis', NODE_ENV)
 }`

Create different modules based on environment like development.js, production.js. And these modules will return config object. This way build will fail if we don't set NODE_ENV to correct value.

Then
import * as envConfig from '_envConfig'; console.log(envConfig);