Replacement attribute expected in pattern definition

Question

I have a Gulp task build:env that generates an app.constant.js file for my AngularJS application. But the commands results with the error:

/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:82
        throw new Error('Replacement attribute expected in pattern definition.
              ^
Error: Replacement attribute expected in pattern definition.
  at /home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:82:15
  at /home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:2885:18
  at forEach (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:3297:15)
  at Function.transform (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:2884:35)
  at normalize (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:43:12)
  ...etc

Below all files that are used and also the output of the console from the gulpfile.js where you can see the settings are loaded correctly.

.env.json

{
    "active": "dev"
}

environments.json

{
    "demo": {
        "frontend": {
            "host": "app.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        },
        "backend": {
            "host": "api.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": {
                "api": "api/"
            }
        },
        "socket": {
            "host": "socket.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        }
    },
    "dev": {
        "frontend": {
            "host": "app.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        },
        "backend": {
            "host": "api.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": {
                "api": "api/"
            }
        },
        "socket": {
            "host": "socket.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        }
    }
}

gulpfile.js (task build:env)

gulp.task('build:env', function () {
    var env = JSON.parse(fs.readFileSync('./.env.json', 'utf8'));
    var environments = JSON.parse(fs.readFileSync('./.environments.json', 'utf8'));
    var settings = environments[env.active];
    console.log(settings);

    // Replace each placeholder with the correct value for the variable.
    return gulp.src('./config/app.constant.js')
    .pipe(replace({
        patterns: [
            {
                match: 'api',
                replacement: settings.backend.host
            },
            {
                match: 'assets',
                replacement: settings.frontend.host
            }
        ]
    }))
    .pipe(gulp.dest('./www/app'));
});

config/app.constant.js

(function() {
    'use strict';
    angular.module('myapp').constant('settings', {
    'API': '@@api',
    'ASSETS': '@@assets'
    });
}());

console.log(settings)

{
   frontend:{
      host:'192.168.1.112',
      protocol:'http',
      port:'8100',
      endpoint:null
   },
   backend:{
      host:'192.168.1.112',
      protocol:'http',
      port:'80',
      endpoint:{
     api:'api/'
      }
   },
   socket:{
      host:'192.168.1.112',
      protocol:'http',
      port:'3001',
      endpoint:null
   }
}

Ionic/NodeJS/Cordova/Gulp

myuser@my-laptop:~/Documents/Projects/frontend$ ionic info

Your system information:

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
OS: Distributor ID:     Ubuntu Description:     Ubuntu 15.04 
Node Version: v0.12.7

List of dependencies

myuser@my-laptop:~/Documents/Projects/frontend$ npm list --depth 0
frontend@0.0.1 /home/myuser/Documents/Projects/frontend
├── async@0.9.2
├── bower@1.6.3
├── clean-css@2.2.23
├── del@1.2.1
├── gulp@3.9.0
├── gulp-angular-templatecache@1.8.0
├── gulp-concat@2.6.0
├── gulp-cordova-bump@1.3.0
├── gulp-minify-css@0.3.13
├── gulp-ng-annotate@1.1.0
├── gulp-rename@1.2.2
├── gulp-replace-task@0.1.0
├── gulp-sass@1.3.3
├── gulp-useref@1.3.0
├── gulp-util@2.2.20
├── jshint@2.8.0
├── mv@2.1.1
├── ng-annotate@0.15.4
├── q@1.4.1
├── shelljs@0.3.0
├── uglify-js@2.4.14
└── yargs@1.3.3

Answer 1

I resolved mine by using a exports.module

Example

module.exports = function () {
var config = {
    beta: {
        "CssPath": "dist/css/",
        "OidcConfig": {
            "authority": "https://identity/identity/",
            "persistKey": "token",
            "client_id": "test",
            "redirect_uri": "http://beta/#/callback/",
            "scope": "openid profile email roles WebApiResource"
        },
        "JSNLogSettings": {
            "url": "http://beta/jsnlog.logger",
            "consoleLogging": true

        },
        "BaseWebApiUrl": "http://prod/"

    },
    production: {
        "CssPath": "bower_components/templates/dist/css/",
        "OidcConfig": {
            "authority": "https://identity",
            "persistKey": "token",
            "client_id": "test",
            "redirect_uri": "http://test/#/callback/",
            "scope": "openid profile email roles WebApiResource"
        },
        "JSNLogSettings": {
            "url": "http://test/jsnlog.logger",
            "consoleLogging": true

        },
        "BaseWebApiUrl": "http://test"

    }
};

return config;
};

IN GULP DID

buildconfig = require('./build.config')();

gulp.task('replace', function () {
var build = JSON.stringify(buildconfig['production']);

return gulp.src('src/app.module.js')
    .pipe(replacetask({
        usePrefix: false,
        patterns: [
            {
                match: '=constants',
                replacement: "=" + build
            }
        ]
    }))
    .pipe(gulp.dest(config.build));
});

Angular Module

(function () {
'use strict';

window.BuildVars =constants;

angular
    .module('app', [
        'app.views',
        'app.services',
        'app.directives',
        'angular.filter'
    ]);

})();

I know I'm using window instead of constant but this works little easier for me however could always create a constant to reference window.{VarName} to tie in to angular. Just what I have working currently

EDIT

Not using window.

AngularJS

(function() {
    'use strict';
    angular.module('myapp').constant('settings', {
        'API': @@buildConstants
    });
}());

GULP

gulp.task('replace', function () {
    var build = JSON.stringify(buildconfig['production']);

    return gulp.src('src/app.module.js')
        .pipe(replacetask({

            patterns: [
                {
                    match: 'buildConstants',
                    replacement: build
                }
            ]
        }))
        .pipe(gulp.dest(config.build));
});

Your Gulp would like more like

gulp.task('build:env', function () {
    var env = JSON.parse(fs.readFileSync('./.env.json', 'utf8'));
    var environments = JSON.parse(fs.readFileSync('./.environments.json', 'utf8'));
    var settings = environments[env.active];
    console.log(settings);

    var backend = JSON.stringify(settings.backend.host);
    var frontend = JSON.stringify(settings.frontend.host);

    // Replace each placeholder with the correct value for the variable.
    return gulp.src('./config/app.constant.js')
        .pipe(replace({
            patterns: [
                {
                    match: 'api',
                    replacement: backend
                },
                {
                    match: 'assets',
                    replacement: frontend
                }
            ]
        }))
        .pipe(gulp.dest('./www/app'));
});

By parsing the JSON the replace cannot insert an Object. Just make it back to a JSON string and should work..