The AngularAMD framework is unable to access the property 'bootstrap' due to being undefined

While setting up my AngularJS app with AngularAMD (a RequireJS implementation for AngularJs), I have encountered an issue:

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 various approaches to resolve this issue, but so far none of them seem to be effective. What could I potentially be doing wrong?

Note: This error only occurs occasionally during page load.

javascriptangularjsrequirejsangular-amd

Answer №1

After some trial and error, I managed to solve the issue that arose after my previous question was deleted. Firstly, it might just be my neurosis, but remember to include baseUrl before defining your paths array.

Secondly, instead of the code snippet below in your app.js:

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);

Consider replacing it with the following:

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

This method will effectively load it into the DOM. If you have multiple controllers, follow a similar structure.

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, ensure that you do not have ng-app specified in your HTML file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

.prop() compared to .attr()

Hey, did you know that jQuery 1.6 introduced the new function prop()? $(selector).click(function(){ //instead of: this.getAttribute('style'); //should I use: $(this).prop('style'); //or maybe: $(this).attr(&apos ...

javascriptjquerydomattrprop

Choosing multiple lists in Angular 2 can be achieved through a simple process

I am looking to create a functionality where, upon clicking on multiple lists, the color changes from grey to pink. Clicking again will revert the color back to grey. How can I achieve this using class binding? Below is the code snippet I have tried with ...

javascriptangulartypescript

The efficiency of Ajax JSON timeouts needs improvement

Currently, I'm in the process of developing an interactive map with specific functionalities. Essentially, the user will click on a year (stored as var currentyear) and then select a country (its name stored as var thenameonly). Subsequently, an AJAX ...

javascriptjqueryjsonajaxlag

Transmitting OfficeJS 2D Array via an Ajax Call

Struggling with sending a "large" table using OfficeJS: functionfile.html loaded from manifest route <script> (function (){ "use strict"; Office.initialize = function (reason) { $(document).ready(function() { $("#send-data-button").cli ...

javascriptajaxflaskoffice-js

Attempting to decode the warnings that appear while utilizing babel for react.js

Recently, I created a basic React rendering function that displays the word "hello" within a div element with the id of "react-container". However, I have been encountering warning messages in the console such as: unreachable code after return statement ...

javascriptreactjsbabeljs

Tips for updating the contents of a div dynamically in JavaScript/jQuery without the need for clicking a button or a link

Is there a way to automatically reload or refresh the content of a specific div element without refreshing the entire page, and without any user interaction such as clicking a button or link? I am looking to update the div with the id 'div_graph' ...

javascriptphpjqueryhtml

Tips for creating precise dots on a polished slideshow

Is it possible to change the buttons on my slideshow to actual dots instead of numbers? I tried following the instructions I found online, but the code doesn't seem to be working. Can anyone provide guidance on how to achieve this? My website is still ...

javascriptjqueryslick.js

Is there a way for me to choose the item from the search dropdown so that it fills in the search input field automatically?

Upon typing a word into the search input field, a list of suggestions will appear below. https://i.sstatic.net/etOBI.png Is there a way for me to select a word from the list like Maine (ME) and have it automatically fill the search input field? What chan ...

javascripthtmlonclickbootstrap-5

Tips on using jQuery to horizontally align an element in the viewport

Although this question has been raised before, my situation is rather unique. I am currently constructing an iframe for future integration into a slideshow component on the website. The challenge lies in the fact that I have a dynamically sized flexbox th ...

javascriptjqueryhtmlcss

Changing the ng-model value of an AngularJS controller with another AngularJS controller

Hello Angular Gurus, I am a beginner when it comes to Angular Js and I have been attempting to figure out how to update an input in one controller with the value from another controller. I am unsure if this is achievable or not? To give you an idea, I ha ...

angularjsangularjs-service

Leveraging a multi-dimensional JSON array to dynamically populate select options

I'm working on a scenario where I have 2 select boxes - one with static choices and the other being dynamic based on the selection from the first box. I'm using Ajax along with a PHP file that returns multiple arrays, and my goal is to populate t ...

javascriptjqueryarraysjson

What is the importance of using $scope.$apply after assigning values to ng-model within forms?

Let's talk about a form: <form name="placeThis" id="placeThis" novalidate ng-submit="submitForm();"> <input type="hidden" ng-model="placeThis.target"/> </form> My goal is to assign a default value to placeThis.target from my co ...

javascriptangularjs

How can you ensure a div stays at the top or bottom of a page based on the user's scrolling behavior?

Hello there! While I know there have been many questions regarding sticking a div to the top or bottom while scrolling, my particular issue is a bit more specific. My dilemma is that I am looking for the div to stick either to the top or the bottom based ...

javascriptjqueryhtmltwitter-bootstrapcss

Ensuring Consistent Data in Web Forms When Editing a User's "Points" Field

In the process of creating a booking system, I am faced with an issue regarding how points are allocated to users. An admin can assign points to a user through a form, which the user then uses when booking a slot. The problem arises when the admin opens th ...

javascriptnode.jsreactjsmongodbexpress

Revising a value that is influenced by the fluctuations of another value, and conversely

Currently facing a tricky issue with interdependent values in my code that I can't seem to resolve online. The problem lies in the fact that one value is affected by changes in another value, and vice versa. Here is a snippet of my code: <div cla ...

htmlangularjsangularjs-ng-change

assign the value of a select box using a function

I have a data table with rows containing date input boxes using Jquery datepicker, and a column in the table has a dropdown box with Yes and No values. When a date input box is selected with a value, I want to automatically prepopulate the dropdown with Ye ...

javascriptjquery

Executing an Ajax request to a document containing <script> elements

Recently, I developed a sample page that effectively mimics table layout pages but without relying on the traditional mobile-unfriendly table features. The structure of the page is as follows: <html> ... <body> <div type="page" ...

javascriptjqueryajax

Modifying the scope variable does not trigger an update in the AngularJS directive

Recently, I created a small directive that wraps its contents with another template file. The objective is to transform the code like this: <layout name="Default">My cool content</layout> into this output: <div class="layoutDefault">My ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the behavior of a variable when it is assigned an object?

When using the post method, the application retrieves an object from the HTML form as shown below: code : app.post("/foo", (req, res)=> { const data = req.body; const itemId = req.body.id; console.log(data); console.log(itemId); }) ...

javascriptnode.jsjsonexpress

How can you determine the number of elements that match in two arrays?

As a coding newbie, I'm looking to create a JavaScript function that compares two arrays and assigns a score based on the number of matching elements. However, when I attempt to run it in Chrome's console, I receive an error message stating that ...

javascriptarrayscompare