2

In my Angular JS app, I'm using a lot of third party packages, mainly maintained via Bower.

When I use Grunt to concatenate all of them into one mega file, I'm getting errors when I load my page, for example that

Uncaught ReferenceError: angular is not defined and

GET http://localhost:8080/theproj/v4/dist/app/bootstrap.css.map 404 (Not Found)

What is the best way to properly concatenate all these files to ensure that everything loads in the right order and doesn't cause problems?

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363

2 Answers2

3

First issue: A lot of times third party libraries must be loaded in a particular order. That looks like like it's the source of your first issue. Something is trying to use angular and it's getting loaded before the angular code. You should refactor your grunt task to use a pre-defined order for third party libraries.

Second issue: You probably are missing the .map file. This is a file used by Chrome dev tools to show you the original source for the css (sass or less). Either provide the map file, or delete the reference to it from bootstrap.css. Or just ignore the error, it's only an error when you have chrome dev tools open, and doesn't actually affect your application.

Travis Collins
  • 3,982
  • 3
  • 31
  • 44
1

For the issue of the correct order for your javascript files, i had that problem in a larger project where noone really had a clue which was the correct order. Luckily we found that the Google Closure Compiler does exactly this: https://github.com/google/closure-compiler

You give it all your js files and it analyzes them all and concatenates them in order

$ java -jar compiler.jar --js_output_file=out.js in1.js in2.js in3.js ...

There is even a grunt plugin for the connection: https://github.com/gmarty/grunt-closure-compiler

    'closure-compiler': {
        frontend: {
            closurePath: '/src/to/closure-compiler',
            js: 'static/src/frontend.js',
            jsOutputFile: 'static/js/frontend.min.js',
            maxBuffer: 500,
            options: {
                compilation_level: 'ADVANCED_OPTIMIZATIONS',
                language_in: 'ECMASCRIPT5_STRICT'
            }
        }
    },

Another way would be to change your javascripts into AMD or CommonJS modules, this way you don't have to worry about the correct order. RequireJS (http://requirejs.org/docs/start.html) is a possibility for AMD for example or Webpack (http://webpack.github.io/) ...or many many others.

Pape
  • 291
  • 1
  • 9
  • `closure-compiler` looks interesting but the documentation is just too crappy for me to waste my time trying to figure it out – CodyBugstein Apr 09 '15 at 07:11