What is the conventional way to support multiple environments(develop, staging, production, ci) in an AngularJS application?
For a more concrete example, how would one go about provisioning(probably requires an additional tool) a server endpoint in a config somewhere and then read that server endpoint in for use elsewhere, such as calls like $http.get(server_endpoint+'/rest/api/route'?
You can define an Angular constant, inject it into the required service/controller and refer to environment-specific values
angular.module('YourApp')
.constant('AppConstants', {
'SERVER_ENDPOINT': 'http://api.example.com',
'SHOW_DEBUG': true
});
You would use that like
$http.get(AppConstants.SERVER_ENDPOINT + '/rest/api/route')
If you use Grunt or Gulp, there's a nice task that allows you to create an Angular constant file based on the environment.
grunt-ng-constant
gulp-ng-constant
Grunt example:
ngconstant: {
options: {
name: 'config',
},
dev: {
options: {
dest: '<%= yeoman.app %>/scripts/config.js'
},
constants: {
ENV: {
FB_APP_ID: '123456'
}
}
},
prod: {
options: {
dest: '<%= yeoman.dist %>/scripts/config.js'
},
constants: {
ENV: {
FB_APP_ID: '98765'
}
}
}
}
The tasks that create the production and development version of the app call ngconstant:prod and ngconstant:dev respectively
Related
I want to start using ES6 (2015) in my Angular 1.3 + grunt stack without refactoring the entire existing ES5 code, (or switching grunt with other tool..)
But when trying to use a new ES6 service from an "old" controller I'm getting following error,
" Cannot read property '1' of null
at Function.annotate [as $$annotate] .... "
The babel configuration in grunt:
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>',
src: '**/*.es6.js',
dest: '.tmp/app',
ext: '.es5.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.es6.js',
dest: '.tmp/spec',
ext: '.es5.js'
}]
}
},
The service code:
class InfoService {
constructor($http) {
this.$http = $http;
}
getInfo() {
console.log('getting');
return this.$http.get('/backend/something/readAll');
}
}
InfoService.$inject = ['$http'];
angular.module('app').service('Info', $http => InfoService($http));
The use in es5 controller:
angular.module('app').controller('SomeCtrl',
function ComposerCtrl(Info) {
Info.getInfo();
});
The transpiled ES5 InfoService was generated under .tmp/app (and I configured grunt watch to update changes while developing) so I wonder what am I doing wrong..
You have forgotten about new:
...
angular.module('app').service('Info', $http => new InfoService($http))
In this case, angular will not benefit from $inject property and you will need to ng-annotate your code, as it solves to:
angular.module('app').service('Info', function($http) { return new InfoService($http); });
The simpler solution it to replace service definition with:
angular.module('app').service('Info', InfoService);
Angular's DI will use $inject property and add new operator for you.
It is worth noting, that TypeScript users had the same problem:
How can I define an AngularJS service using a TypeScript class that doesn't pollute the global scope?
EDIT:
It is possible, that you are using wrong controller expression (for example unclosed ng-controller attribute:
<div .... ng-controller="SignupFormController as signupFormCtrl>
This messes up angular and leads to this error message on older versions of angular (1.3).
More info about issue:
https://github.com/angular/angular.js/issues/10875
So I've found a way to make it work but I don't like it so much..
I configured the babel to dist the files at the same place my *.es6.js files and updated the index.html so Angular will load the es5 transpiled file (InfoService.js), and when I debug I do it on the es6 file (I guess it relates to the sourceMap)
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
src: '**/*.es6.js',
ext: '.js'
}]
},
Backend of our app is in PHP and for frontend we are using AngularJs.
We successfully managed to run e2e tests on local as well as on production server using protractor.
After writing loads of e2e tests for our app, we started looking for its coverage similar to that of unit testing. After searching for lot, luckily we find https://www.npmjs.com/package/grunt-protractor-coverage , exactly what we wanted.
I took help from http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ article which beautifully helps in setting up everything. I setup the config and other grunt tasks for my app, and finally our code(js files) were properly instrumented. I copied the rest of the files(html, static, etc.) to that instrumented code and provided the correct path for the proractor-config file. Tests started running as they were running before, but this time with instrumented files.
Till this point, everything is OK. But when the task for generating coverage-report was executed, we figured that we had empty coverage.json file {}. This means the report will surely be empty as it reads that file to generate report, and as far as I have figured out, this file is generated by protractor-coverage grunt task while tests are executing. It sends the information to the collector(port: 3001) using a POST req and while generating report, a GET req is being made to the same collector.
So, what I figured is, No POST req is being made to collector.
var options = {
hostname: 'localhost',
port: <%=collectorPort%>,
path: '/data',
method: 'POST',
headers:{
'Content-Type':'application/json'
}
};
function saveCoverage(data){
var req = http.request(options, function(res) {
res.on('data', function (chunk) {
});
});
req.on('error', function(e) {
console.log('problem with request: ' + e.message);
});
// write data to request body
req.write(JSON.stringify(data));
req.write('\n');
req.end();
}
Each time it just shows
where it should have listed down every file:
And also, that 100 everywhere is misleading, I ran tests for the source code: http://lkrnac.net/blog/2014/04/measuring-code-coverage-by-protractor/ as explained, but even if there's only one e2e test, the report must have given the actual numbers instead of giving a straight 100 for all.
It might happen that I have some wrong configuration or missed something.
Below are my files:
'use strict';
module.exports = function(grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// configurable paths
app: 'app',
dist: 'dist-test',
e2e: 'coverage/e2e',
instrumentedServer: 'coverage/server/instrument',
instrumentedE2E: 'coverage/e2e/instrumented'
},
// Empties folders to start fresh
clean: {
coverageE2E: {
src: ['<%= yeoman.e2e %>/'],
}
},
// Copies remaining files to places other tasks can use
copy: {
coverageE2E: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.e2e %>/instrumented/app',
src: [
'**/*',
'!modules/**/*.js',
'!editor/**/*.js'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.e2e %>/instrumented/app/images',
src: ['generated/*']
}, ]
},
},
// start - code coverage settings
instrument: {
files: ['app/modules/**/*.js', 'app/editor/**/*.js'],
options: {
lazy: true,
basePath: 'coverage/e2e/instrumented/'
}
},
makeReport: {
src: '<%= yeoman.instrumentedE2E %>/*.json',
options: {
type: 'html',
dir: '<%= yeoman.e2e %>/reports',
print: 'detail',
// type: 'lcov'
// dir: 'reports'
}
},
protractor_coverage: {
options: {
configFile: 'test/e2e/protractor-config.js', // Default config file
keepAlive: true, // If false, the grunt process stops when the test fails.
noColor: false, // If true, protractor will not use colors in its output.
coverageDir: '<%= yeoman.instrumentedE2E %>',
args: {},
run: {}
},
chrome: {
options: {
args: {
baseUrl: 'https://localapp.vwo.com/v3/#/',
// Arguments passed to the command
'browser': 'chrome'
}
}
}
}
});
grunt.registerTask('default', [
'clean:coverageE2E',
'copy:coverageE2E',
'instrument',
'protractor_coverage:chrome',
'makeReport'
]);
};
And my coverage.json file:
{}
I have an angular app setup that's using grunt, but I'd like to be able to use grunt as a preprocessor to replace variables and I haven't been able to find anything that matches my needs.
For instance, if I change the name of my main app module to "someAppName" in a config file, I'd like to just use something like "ENV.APP_NAME" in various html and js files and have that replaced by an appropriate value for that environment.
Ideally I'd like to have a config file somewhere along these lines, either as a .json file or using module.exports to expose an object, which specifies values for different environments:
{
APP_NAME:{
dev: "someAppDev",
prod: "someApp"
},
API_BASE:{
dev: "localhost:8000/",
prod: "https://www.some-site.com/api/"
}
}
and then I could create a grunt task and pass it either "dev" or "prod" to have it run the preprocessor and replace each instance with the corresponding value. I've found this https://github.com/STAH/grunt-preprocessor but the examples are confusing and I don't think it's quite what I'm looking for.
Is there anything like this that allows you to create preprocessed environment variables and read them from an external config file, or am I forced to build my own grunt plugin? Has anyone achieved something similar with grunt?
EDIT: I've begun building a grunt plugin for this specific task, once it's done and tested I'll post it up on npm
Use grunt-ng-constant.
Npm install this plugin:
npm install grunt-ng-constant --save-dev
Then in grunt write to config file:
ngconstant: {
// Options for all targets
options: {
space: ' ',
wrap: '"use strict";\n\n {%= __ngModule %}',
name: 'config',
},
// Environment targets
development: {
options: {
dest: '<%= yeoman.app %>/scripts/config.js'
},
constants: {
ENV: {
myvar1: 'Hello from devel',
myname: 'John Doe'
}
}
},
production: {
options: {
dest: '<%= yeoman.dist %>/scripts/config.js'
},
constants: {
ENV: {
myvar1: 'Hello',
myname: 'John Doe'
}
}
}
},
Then add to grunt task:
grunt.task.run([
'clean:server',
'ngconstant:development',
'connect:livereload',
'watch'
]);
Running task would generate config.js with constants defined in gruntfile.
Then add config.js to your index.html:
<script src="/scripts/config.js" />
Inject it to your app:
var app = angular.module('myApp', [ 'config' ]);
And inject into controller:
.controller('MainCtrl', function ($scope, $http, ENV) {
console.log(ENV.myvar1);
});
You can set different variables for production and different for development, by setting it in gruntfile and setting ng:production or ng:development.
Refer this article explaining the procedure for more information.
You could do something making use of grunt-string-replace while loading some config values into Grunt from a JSON file. Suppose you had this in myconfig.json:
{
"appName": "MyGrowth",
"version": "1.1.2",
}
Then perhaps load the config into Gruntfile.js from JSON with something like:
grunt.initConfig({
myConfig: grunt.file.readJSON('myconfig.json'),
// ... the rest of the stuff in your initConfig goes sure
}
Then you would have some sort of task like this maybe:
'string-replace': {
version: {
options: {
replacements: [
{
pattern: /MY_VERSION/ig,
replacement: '<%= myConfig.version %>'
}
]
},
files: [{
expand: true,
cwd: 'src/',
src: '**/*.js',
dest: 'dist/'
}]
}
}
That would make actual changes to the files if you had 'src' and 'dest' in the same folder, otherwise it would put the processed files in the dest folder.
I've not actually used this recipe for preprocessing, but I use it for other types of things like replacing tags in a framework with the app name as configured in package.json.
Hope it helps.
Alright I ended up building a grunt plugin just for this task because it's something that I really needed. It allows you to place environment variable definitions in a .json file like I described in my original question and replaces all instances in a specified file or list of files.
https://github.com/ejfrancis/grunt-envpreprocess
So if you have something like this
HTML
<head>
<title>ENV.APP_NAME</title>
</head>
<script src="ENV.API_BASE/user/create">
JS
var version = "ENV.APP_VERSION";
alert(version);
The task will replace it with this
HTML
<head>
<title>AppDev</title>
</head>
<script src="http://localhost:8000/user/create">
JS
var version = "0.1.0";
alert(version);
I build a Angular App with Yo angular-genertor,
I was building the app with Grunt Build fine, then I added Bootstrap 3 and also npm install grunt-bower-install
I added these lines to the Grunt file
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//ADDED THIS LINE
grunt.loadNpmTasks('grunt-bower-install');
grunt.initConfig({
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist'
},
//ADDED THESE LINES
'bower-install': {
target: {
src: [
'app/index.html'
],
}
},
I have removed these line however!
Now Grunt Build is throwing this error
Running "bowerInstall:app" (bowerInstall) task
Warning: Cannot read property 'main' of undefined Use --force to continue.
Aborted due to warnings.
I do know what to do or even where to start?
In my yeoman generated project this task looks like:
'bower-install': {
app: {
html: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
}
},
In newer version instead of html uses src:
'bowerInstall': {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/'
}
},
Maybe you adapt it to your case. Though i think it should work without changes.
But you have almost the same, so maybe the problem in another place.
I found the answer,
I simply needed to run Bower Install,
I've been using a modified version of the gruntfile that comes with the Yeoman.io base angularjs generator, and the grunt-bower-install command is kind of handy for keeping my base index.html file up-to-date with bower dependencies.
However, when I do a bower install (package) --save and then grunt bower-install, my index.html updates, but my karma.conf.js does not update, meaning I need to manually add the new file to the list of files to load when karma runs the test suite (otherwise the injector fails trying to inject a nonexistent package).
Is there any easy-peasy way to add this to my grunt workflow? It's not the end of the world, but it is one of those easy-to-forget things.
I actually came up with a solution for just this problem. Check out https://github.com/stephenplusplus/grunt-bower-install/issues/35#issuecomment-32084805
'bower-install': {
app: {
src: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
},
test: {
src: 'karma.conf.js',
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'.*\.js'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}