ES6 template

[okhomenko]

Would be good to have ability to use with ES6/CommonJS modules;

import angular from 'angular';
angular.constant(...)

[atticoos]

+1 on this. I'll add this for the next release

[atticoos]

Noting that I've received similar requests for TS and CoffeeScript templates

[atticoos]

@okhomenko I may have to bump this for 1.4.0

Would the following work properly for ES6?

import angular from 'angular';

angular.module('foo', ['bar'])
.constant(...)

It's pretty much just loading the angular module, right?

[atticoos]

This has been added in 5a0d878741326eb8dadc2ddf798921499107f251 as a custom wrap property.

Example

gulp.src('path/to.json')
.pipe(ngConfig('myApp.conf', {
  wrap: 'ES6' 
})
.pipe(gulp.dest('dist/'))

Output

import angular from 'angular';
export default angular.module("gulp-ng-config", [])
.constant("one", {"two":"three"});

This will be part of 1.3.0

[okhomenko]

Thanks, that looks exactly what i needed. I use right now next snippet, but via template is definitely cleaner way.

gulp.src('path/to.json')
.pipe(ngConfig('myApp.conf', {
  wrap: `
    import angular from 'angular';
    export default <%= module %>;
  `
})
.pipe(gulp.dest('dist/'))

[atticoos]

Ha, that's exactly what I did too

https://github.com/ajwhite/gulp-ng-config/blob/develop/gulp-ng-config.js#L13

At some point I may introduce some actual template files as this grows into different formats that would affect the actual definition of the constants.

[emcniece]

Once the config is compiled into the ES6 wrap, how are you injecting it into your app? I am getting a pile of errors about instantiation and missing dependencies.

config.js:

import angular from 'angular';
export default angular.module("myConfig")
.constant("API_PREFIX", "http://")

app.js:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import myConfig from './config';
import AppComponent from './app.component';

angular.module('app', [
    uiRouter,
    myConfig
  ])
  .config(($locationProvider, $stateProvider, $urlRouterProvider, myConfig) => {
    "ngInject";
    console.log(myConfig); // <-- why no love?
  })
  .constant('OtherConstant', 'this one is ok')
  .component('app', AppComponent);

[okhomenko]

@emcniece, you need brackets in module definition angular.module("myConfig", []) and use it as dependency angular.module('app', [myConfig.name]), and also you should inject constant, not module

// config.js
export default angular.module("myConfig", [])
  .constant("API_PREFIX", "http://")

// app.js
import myConfig from './config';

angular.module('app', [
    myConfig.name
  ])
  .config((API_PREFIX) => {
    "ngInject";
    console.log(API_PREFIX);
  })

[emcniece]

Thanks for the tip! I have tried altering the createModule boolean, and I am getting different errors for each state.

createModule: false: No brackets in the module init (export default angular.module("myConfig"))

angular.js:68    Uncaught Error: [$injector:nomod] Module 'myConfig' is not available

createModule: true: Brackets in the module init (export default angular.module("myConfig", []))

angular.js:68    Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"_invokeQueue":[["$provide","constant",{"0":"API_PREFIX","1":"http://"}]],"_configBlocks":[],"_runBlocks":[],"requires":[],"name":"myConfig"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object

Is this module being instantiated too early?

[atticoos]

That sounds like it's having an issue importing angular to me

Argument 'module' is not a function, got Object

This means that angular.module isn't being recognized properly

[emcniece]

Gotcha. I'm using https://github.com/angularclass/NG6-starter - the app.js file is where Angular starts up.

Perhaps the issue here is syntax - I'll try something like they do in common.js

[emcniece]

Bingo!

config.js:

export default angular.module("myConfig", [])
.constant("API_PREFIX", "http://")
.name;

app.js:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import myConfig from './config';
import AppComponent from './app.component';

angular.module('app', [
    uiRouter,
    myConfig
  ])
  .config(($locationProvider, $stateProvider, $urlRouterProvider, API_PREFIX) => {
    "ngInject";
    console.log(API_PREFIX); // <-- booya
  })
  .constant('OtherConstant', 'this one is ok')
  .component('app', AppComponent);

[emcniece]

... and here's the working ngConfig task:

gulp.task('ng-config', function() {
  let envVars = _.pick(process.env,
    'API_PREFIX',
    'API_PORT',
    'API_HOST',
    'API_RESTROOT',
    'WEB_PORT',
    'GA_ID');

  return b2v.stream(new Buffer(JSON.stringify(envVars)))
    .pipe(rename('config.js'))
    .pipe(
      ngConfig('tsConfig', {
        createModule: true,
        wrap: `export default <%= module %>`
      })
    )
    .pipe(replace(/;$/gm, '.name;'))
    .pipe(gulp.dest('./client/app/'))
});

Thanks for your help!

[atticoos]

Glad you got it!