claudio-silva / grunt-angular-builder Goto Github PK

Trying to include NgRoute to the build.
Ng-route is installed via bower as in a normal grunt setup.

The main module depeands upon NgRoute as in

angular.module('<%= appName %>', ['ngRoute']);

Example of configuration

'angular-builder': {
  options: {
    main: '<%= appName %>',
  },
  app: {
    src:  [
      '<%%= myApp.app %>/scripts/*.js',
      '<%%= myApp.modulesPath %>/*/{,*/}*.js',
      '<%%= myApp.app %>/bower_components/angular-route/angular-route.js'
      ,
    ]

Results in:
Running "angular-builder:app:debug" (angular-builder) task
Fatal error: Definitions for multiple modules were found on the same file.
File: frontend/bower_components/angular-route/angular-route.js

Maybe I am attacking this at the wrong angle?

How can you include a third party library, but not compile it?

For example we use angular-ui, which isn't built compatible.

If i don't include it in the build path i'll get the error

Warning: Module 'ui.filter' was not found. Use --force to continue.

if i include it, i get the error:

Warning: Appending definitions to several modules in the same file is not allowed.
Started with module ui.directives and later switched to ui.filters.

Nvm found it: externalModules

Using "constructor" as folder name is the cause of error

Warning: Cannot read property 'push' of undefined Use --force to continue

Hi there,

I am trying to build my app into /dist dir but I keep getting this error.
This is my config in Grunfile.js

'angular-builder': {
      options: {
        mainModule: 'preregApp',
        externalModules: ['ngSanitize', 'ngResource']
      },

      app: {
        src: 'app/js/**/*.js',
        dest: 'dist/app.js'
      }
    },

This is what my app.js looks like:

'use strict';

/* App Module */

var preregApp = angular.module('preregApp', [
   'ngSanitize',
   'myServices',
   'myControllers',
   'myCommonDirectives',
   'myDirectives'
]);

myServices relies on ngResource.

Would you be able to help me figuring this out?

Many thanks

rebaseDebugUrls does change paths of files which are included via // #require() e.g.

"angular-builder": {
    app: {
        options: {
            mainModule: "app",
            debugBuild: {
                rebaseDebugUrls: [
                  { match: /^src/, replaceWith: "../src" },
                ]
            }
        },
        src: "src/**/*.js",
        dest: "build/app.js"
    }
}

document.write ('\
<script src="src\app\plot.js"></script>\
<script src="../src/app/shared/ngroute.js"></script>\
<script src="../src/app/app.js"></script>\
');

First of all: I really like the build tool! Can't believe you only have 37 stars at the time of this writing. Great documentation too!

I can't get forceInclude to work, this is how my configuration looks. I'm using 1.0.0beta3

        'angular-builder': {
            options: {
                mainModule: 'app.core',
                externalModules: [
                ],
                debugBuild: {
                    rebaseDebugUrls: [
                        { match: /^public_html\//, replaceWith: '/' }
                    ]
                },
                forceInclude: [
                    basePath + 'bower_components/angular/angular.min.js'
                ]
            },
            forceInclude: [
                basePath + 'bower_components/angular/angular.min.js'
            ],
            dist: {
                forceInclude: [
                    basePath + 'bower_components/angular/angular.min.js'
                ],
                src: [
                    basePath + 'app/*.js',
                    basePath + 'app/**/*.js',
                ],
                dest: basePath + 'dist/app.core.js'
            }
        }
...

Hi,

In this repo the latest version is v1.0.0 but for NPM it's lagging behind at v1.0.0-beta3

It would be nice if setting options.debugBuild.enabled to true automatically disabled the release build unless specified otherwise. I'd be happy to work on this and make a pull request if others were interested in this feature.

Hello Claudio,
after a long time i'm here again ;)
this time i managed to include angular-builder as a build tool for a very large project..
I'm setting up the dev environment, and i bumbed into a scenario that i can't figure out ..
the wiki says that each assetpath (be it a template, a css, or whatever) should:

The specified path should be a relative path (not starting with /); it will be relative to the file containing the directive.

take in consideration templates (but it would be the same for other assets):
a directive in subfolder path/of/moduleone/ declares:
//# template ("main.html") and
templateUrl:'main.html'
How to handle the asset resolution later?

option 1:
a subsequent (for instance ngTemplates) task should manage requiredTemplates and register the path/of/moduleone/main.html template stripping the path leaving main.html alone to let the directive access it in runtime..
It seems to me that this easily leads to conflicts, as other directives in other subfolders may use a template with same name.
This could be workarounded naming the template wwith long names, maybe reflecting the directive or module folder structure as path-of-moduleone-main.html but it doesn't look nice..

option 2:
no subtask manages the requiredTemplates and templates would be accessed in runtime, the directive will not fetch it because it has no path to it

option 3:
the angular-builder annotation for template is relative but the templateUrl annotation is absolute, this
should work with some custom mappping of requiredTemplates array.. but it looks a bit counterintuitive.

however the relative path constraint would make any asset-sharing between modules very awkward

i wonder if i'm missing the point about this feature.

thank you Claudio.

[EDIT]
i saw the path is pushed in the array in https://github.com/claudio-silva/grunt-angular-builder/blob/master/tasks/middleware/exportRequiredTemplates.js#L114

a solution in my opinion could be to (optionally) use non-relative paths and declare them in the same way both in templateUrl and in //# template,
the developer should know how to handle that pseudo-absolute url..
paths.push (path.normalize (path.dirname (filePath) + '/' + url)); ->
paths.push(path.normalize(url));

This will allow additional flexibility when declaring modules.
It is still not recommended, as it hampers the builder's ability to optimize the source code.
But it can be useful for some use cases. For instance, some library authors (ex: ui-router) like to declare all modules in a single file and then add definitions to them in additional files.

The big drawback of this feature is that, when one of the modules declared in the same file is required by the application, all the remaining modules will be declared too, as it is not feasible to split the file. This may cause the inclusion in the build of declarations which will not be used by the application, therefore reducing the effectiveness of the building process.

Special care must be taken to not include the same file repeatedly when including each module defined there.

Hi, first I want to say this is a fantastic tool! Exactly what we were looking for.

My directory structure looks like this:

 |--moduleDirectory
 |  |--servicesDirectory
 |  |    service1.js
 |  |    services2_and_3.js
 |  |--directivesDirectory
 |  |    my_directives.js
 |  |    some_other_directive.js
 |  module.js

Where I have many moduleDirectories, and each one has a module.js. Each of my modules is assigned to a variable var myModule = angular.module() which my services etc are chained on myModule.service(). For some reason, angular-builder is correctly finding the top-level module but not the subdirectories.

Any tips? Much appreciated.

Hi,
I'm a bit new to grunt and it's the first time I'm trying to modularize an angularjs app on my own.
I have my files structure which looks like this:

• app
  • scripts
  • controllers
    • controller1.js
  • services
    • service1.js
  • app.js

and this is my grunt configurations

 'angular-builder': {
    options: {
        mainModule: 'SocialPhotoApp',
        externalModules: 'ezfb',
        releaseBuild: {
           renameModuleRefs: true
        }
    },
     app: {
        src: 'app/scripts/**/*.js',
        dest: 'build/saxSocialPhotoApp.js'
    }
},

and my app.js looks like this

var SocialPhotoApp = angular
    .module('SocialPhotoApp', ['custom-dependency']);

and my controller1.js looks like this:

 SocialPhotoApp.controller('FacebookCtrl',['$scope',
     function($scope){
 }]);

I want my controller to be included in the build but for some reason grunt-angular-build ignores controller1.js, I tried adding //#require (path/to/file) in the js script, but nothing changed, I tryed adding the require:'path/to/file' in the grunt task configuration, but again nothing changed, someone has some ideas?
thanks.

i'm including stylesheets in my build and then concatenating them with
concat: { app: { src: '<%= requiredStylesheets %>', dest: bld + 'styles/styles.css' } }

my angular-builder options are below:
assets: { enabled: true, targetDir: 'styles', symlink: true }

I'm not sure if it is the concat process or angular-builder that is dragging all the files referenced in the css into paths relative to the styles directory. My goal is to rebase the url's so the output directory structure will end up more organized. Do you have any suggestions on the best way to accomplish this?

I was looking for a way to support sourcemaps, but couldn't find anything in the docs nor code. Is it possible? Are there any recommendations especially in combination with uglify?

The basic angular usage

(function(angular) {
angular.module('x', []);
})(window.angular);

is not properly removed / replaced.

https://github.com/angular-ui/ui-router

Trying to include ui-router into a project which has multiple sub modules defined in one file. The builder throws an error as expected.

I moved all of the sub module definitions into separate files, triple checked the main file to see that there was only one module being defined in it, but I continue to receive the "multiple modules in one file" error. Is there some other pattern in ui-router not supported by grunt-angular-builder?

Hi Claudio,
I'm trying to make my first build, but maybe i'm missing something..
first try : i had a Warning: Definitions for multiple modules were found on the same file. for i was using that ui.bootstrap library.
I understand why, so i guessed to put it as an externalModules (is it correct? this lib should be loaded "manually" with a script tag, right? or there is some other option?).
but i got stuck on Fatal error: Module ng was not found. (!!) now..
this is my grunt.initConfig['angular-builder']

'angular-builder' : {  
      options: {  
        main: 'geiat-app'
        ,externalModules: 'ui.bootstrap'
      },
      app: {
        files: [
          {
            src:  'src/**/*.js'
            ,dest: '../js/builds/app.js'
          }
        ]
      }
    }

in the src dir there is a ng-lib dir with:

angular.js
angular-resource.js
angular-route.js

what's wrong?

Lets say the main app.js file is something like this:

angular.module('moduleA', ['anotherModule','yetAnotherModule']);
angular.module('moduleB', []);
angular.module('moduleC', []);
angular.module('moduleMain', [
'moduleA'
,'moduleB'
,'moduleC'
])

I get the following error:
"Fatal error: Definitions for multiple modules were found on the same file."
Maybe we could make the plugin to accept multiple modules on the same file.
But for now, how may I solve this?

I have two modules that may use the same services:

// File: modules/app1.js
var app = "app1";
angular.module(app, []);

and

// File: modules/app2.js
var app = "app2";
angular.module(app, []);

with a factory

// File: providers/commonFactory.js
angular.module(app).factory("commonFactory", function(){ return {}; });

Then I concatenate both modules/app1.js and modules/app2.js with a factory providers/commonFactory.js and the app reference in a factory file gets resolved with an appropriate module name:

// File: build/app1.js
var app = "app1";
angular.module(app, []);
angular.module(app).factory("commonFactory", function(){ return {}; });

and

// File: build/app2.js
var app = "app2";
angular.module(app, []);
angular.module(app).factory("commonFactory", function(){ return {}; });

The problem is that I have to manually specify which services have to be concatenated to which modules if I want to avoid having redundant code so I decided to try out your tool. Also I don't know in advance which services are going to be common for both modules. How do I go about this the right way?

Using the //# require ("foo.js") method of including scripts, the debug file generated has incorrect URIs (back slashes instead of forward slashes).

I'm using Windows 8. Back slashes cause the http requests to fail on localhost.

document.write ('\
<script src="tests\include-non-angular\foo.js"></script>\
<script src="tests\include-non-angular\mine\scriptb.js"></script>\
<script src="tests\include-non-angular\mine\scripta.js"></script>\
<script src="tests/include-non-angular/Library1.js"></script>\
<script src="tests/include-non-angular/App.js"></script>\
');

i'm trying to achieve this feature:
The concept is that the main module acts as an submodule-agnostic application-container.
I mean: the main module depends only on the core modules, then with an options.additionalModules the main module gets augmented with arbitrary set of features.
So at build time the options.additionalModules is iterated for tracing (just like the main module is traced)

options.additionalModules.forEach(function(module)
{
    traceModule (module, function... )
})

,and then they get concated to mainModule's requires

traceModule (options.main, function (/*ModuleDef*/module)
{
   if(options.additionalModules){
     module.requires = module.requires.concat(options.additionalModules);
   }
    ....
});

i modified a little bit angular-builder.js but probably, an eventual pull should be an extension.
this works correctly on a dist-build but it doesn't in debug mode as the script tags load the original files..
an approach to solve this can be to keep the main module in the bundle
another probably better one can be to add an option similar to the standalone of grunt-angular-templates, so that the main module can be set as to-be-generated..
here is my fork