AngularAMD cannot read property 'bootstrap' of undefined

Question

I'm trying to set up my angularjs app using AngularAMD (a Requirejs implementation with AngularJs), but sometimes i get

Cannot read property 'bootstrap' of undefined(…)

main.js

require.config({

paths: {
  //Angular
  'angular': '/bower_components/angular/angular',
  'angular-route': '/bower_components/angular-route/angular-route.min',
  'angularAMD': '/bower_components/angularAMD/angularAMD.min',
  'angular-slick': '/bower_components/angular-slick/dist/slick.min',
  'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize',


  //Plugins

  'jquery': '/bower_components/jquery/dist/jquery',
  'materialize': '/bower_components/Materialize/dist/js/materialize.min',
  'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer',
  'hammerjs': '/bower_components/Materialize/js/hammer.min',
  'parallax': '/bower_components/parallax.js/parallax.min',
  'slick': '/bower_components/slick-carousel/slick/slick.min',
  'domReady': '/bower_components/requirejs/domReady',


  //Controllers

  'HomeController': 'Components/Home/home.controller',


},
shim: {
  angular: {
    exports: "angular",
  },

  'angular-route': ['angular'],
  'angularAMD': ['angular'],

  'angular-slick': ['angular', 'slick'],
  'angular-sanitize': ['angular'],
  'materialize': ['jquery', 'jquery-hammer', 'hammerjs'],
  'parallax': ['jquery'],

},
baseUrl: "src",
deps: ['app']
});






});

app.js

define(['angularAMD', 'angular-route', 'angular-sanitize', 'angular-slick'], function(angularAMD) {

  var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']);

  app.config(function($routeProvider, $locationProvider) {

    $routeProvider.when("/", angularAMD.route({
      templateUrl: 'views/Home/home.html',
      controller: 'HomeController',
      controllerAs: 'vm'
    }));
    $locationProvider.html5Mode(true);
  });
  return angularAMD.bootstrap(app);

});

I've tried many differents ways, but none of them seems to work, what am i doing wrong?..

Note: it only happens sometimes, when the page loads..

Please show the `script` elements that load RequireJS an kick off your application. — Louis, May 22 '16 at 11:33

score -1 · Answer 1 · answered Aug 29 '16 at 20:12

Well since my last question was deleted, I was able to fix this issue. First: This maybe my neurosis, but add baseUrl before your paths array.

Second: (In your app.js), instead of

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/", angularAMD.route({
      templateUrl: 'views/Home/home.html',
      controller: 'HomeController',
      controllerAs: 'vm'
    }));
    $locationProvider.html5Mode(true);
  });
 return angularAMD.bootstrap(app);

Do this:

var app = angular.module("app", ['ngRoute', 'ngSanitize', 'slick']);
app.init = function () {
   angular.bootstrap(document, ['app']);
};
return app;

This will load it to the DOM. If you have several controllers do so like this.

require.config({
  baseUrl: "src",
  paths: {
    //Angular
    'angular': '/bower_components/angular/angular',
    'angular-route': '/bower_components/angular-route/angular-route.min',
    'angularAMD': '/bower_components/angularAMD/angularAMD.min',
    'angular-slick': '/bower_components/angular-slick/dist/slick.min',
    'angular-sanitize': '/bower_components/angular-sanitize/angular-sanitize',

    //Plugins
    'jquery': '/bower_components/jquery/dist/jquery',
    'materialize': '/bower_components/Materialize/dist/js/materialize.min',
    'jquery-hammer': '/bower_components/Materialize/js/jquery.hammer',
    'hammerjs': '/bower_components/Materialize/js/hammer.min',
    'parallax': '/bower_components/parallax.js/parallax.min',
    'slick': '/bower_components/slick-carousel/slick/slick.min',
    'domReady': '/bower_components/requirejs/domReady',
  },
  shim: {
    jquery: { exports: '$' },
    angular: {
      exports: "angular",
    },
    'angular-route': {
      deps: ['angular'],
      exports: 'angular'
    },
    'angularAMD': {
      deps: ['angular'],
      exports: 'angular'
    },
    'angular-slick': ['angular', 'slick'],
    'angular-sanitize':  {
      deps: ['angular'],
      exports: 'angular'
    },
    'materialize': ['jquery', 'jquery-hammer', 'hammerjs'],
    'parallax': ['jquery'],
  },
  deps: ['app']
});
require(['app', 'other_controller', 'other_controller'], function(app) {
  app.init();
});

Lastly make sure, you do not have ng-app in your html.

Whether `baseUrl` appears before or after `paths` makes no difference. Also, RequireJS' configuration must not contain any `shim` for modules that call `define`. You've got a few there, `angularAMD` being the most immediately obvious one. (Since `angularAMD` is built for AMD, it must call `define`, because that's what makes a module an *AMD* module. Yes, I know the documentation for `angularAMD` shows a `shim` but `angularAMD` does not get to dictate how RequireJS works.) No need for `deps` if you have a call to `require` just after the config. — Louis, Aug 29 '16 at 20:40

AngularAMD cannot read property 'bootstrap' of undefined

1 Answers1