Angular modules as node modules?

Question

I really like angular's core modules and I'm trying to use some of these features in a node/io.js environment ; i.e: to transpile angular modules into ES5 modules in commonjs format.

I attempted to build angular modules by hand one by one using traceur without success (generates circular dependency) and also tried to adapt angular project's gulpfile.js in order to produce an ES5 output in commonjs format:

var _COMPILER_CONFIG_JS_DEFAULT = {
  sourceMaps: true,
  annotations: true, // parse annotations
  types: true, // parse types
  script: false, // parse as a module
  memberVariables: true, // parse class fields
  modules: 'commonjs'
};

... running build/transpile.js.dev task, but I keep facing this message:

TypeError: Cannot call method 'map' of undefined

Even by changing sourceMaps in default config, I can't get a rid of this map error.

I also noticed their transpiler tool, which seems to actually handle the output formatting. But I had no chance by changing its options. I only can result with default config in files in System.register format that I can't convert to commonjs.

Does anyone that went through all this have a solution to use angular's modules in a commonjs-style project? Note that I want to use it as a library and I don't want to convert my project to another type of modules system.

Any advice is welcome, thanks!

Answer 1

Use a CommonJS wrapper to map Angular modules, such as this example:

# angular is required globally
{{name}} = angular.module '{{name}}', []
module.exports = {{name}}

• Requiring vs. Browserifying Angular
• Should I use Browserify or Webpack for lazy loading of dependancies in angular 1.x
• WebPack: Angular Example
• WebPack: Angular Injector Plugin
• AngularJS Issue #4694: feat($injector): ability to load new modules after bootstrapping

Answer 2

I thinking using Angular modules along with a build step to concatenate all your files into one main file is a good approach.

Here is the gulpfile.js of a project I'm working.

var gulp = require('gulp');
var concat = require('gulp-concat');


    var path = 'app/js/';
    var srcFiles = [path + 'midi.js',
                    path + 'keyboard.js',
                    path + 'analyser.js',
                    path + 'services/amp.js',
                    path + 'services/lfo-amp.js',
                    path + 'services/osc.js',
                    path + 'services/filter.js',
                    path + 'services/lfo.js',
                    path + 'audio.js',
                    path + 'synth.js',
                    path + 'app.js'];

    gulp.task('default', function () {
      gulp.src(srcFiles)
        .pipe(concat('app.js'))
        .pipe(gulp.dest('dist/js/'))
    });

gulp.src accepts an array of files to concatenate and will keep all your files in the correct order. You can now break your Angular project up into as main files as you like without having to worry about bottle necking your server with a trying to load a bunch of script tags.