I'm encountering difficulties when trying to optimize an Angular project with the r.js optimizer.
Everything works smoothly when I use grunt-requirejs for optimization, but as soon as I attempt to exclude Angular from the build, I encounter an error in the angular route module stating that Angular is undefined. My objective is to load Angular from a CDN while still including angular-route in the application.
Why does angular-route not wait until Angular is fully loaded?
I understand that Angular is being loaded, but I am unsure why angular-route is executed before that occurs, and how I can resolve this issue.
app
define(['angular', ...], function(angular){
...
});
public/js/requirejs-config.js:
require.config({
shim: {
angular: {
exports: 'angular'
},
'angular-route': [
'angular'
]
},
paths: {
angular: '../../bower_components/angular/angular',
'angular-route': '../../bower_components/angular-route/angular-route'
}
});
require(['app']);
Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
baseUrl: "public/js",
name: "app",
mainConfigFile: "public/js/requirejs-config.js",
out: "public/js/combined.js",
paths: {
angular: "empty:" //without this it works fine
},
optimize: "none"
}
}
}
});
grunt.loadNpmTasks('grunt-bower-requirejs');
grunt.registerTask('default', ['requirejs']);
};