how to prevent error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

Question

using angular-meteor v 0.9

trying to get a pre-packaged AngularMeteor-SmartAdmin example app to load properly

Getting error:

Error: [ng:btstrpd] App Already Bootstrapped with this Element 'document'

Is there a way to figure out why and where this error occurs?

Here is my meteor listing:

angular:angular-animate                               1.4.0  AngularJS (official) release. For full...
angular:angular-cookies                               1.4.0  AngularJS (official) release. For full...
angular:angular-resource                              1.4.0  AngularJS (official) release. For full...
angular:angular-route                                 1.4.0  AngularJS (official) release. For full...
angular:angular-sanitize                              1.4.0  AngularJS (official) release. For full...
angularui:angular-ui-router                           0.2.15  angular-ui-router (official): Flexibl...
angularui:ui-utils                                    0.2.4  Angular-ui-utils package for meteor.
autopublish                                           1.0.3  Publish the entire database to all cli...
cfs:http-methods                                      0.0.29  Adds HTTP.methods RESTful
gsklee:ngstorage                                      0.3.0  ngStorage package for Meteor
http                                                  1.1.0  Make HTTP calls to remote servers
insecure                                              1.0.3  Allow all database writes by default
less                                                  1.0.14  The dynamic stylesheet language
meteor-platform                                       1.2.2  Include a standard set of Meteor packa...
planettraining:angular-translate                      2.7.0  Angular Translate
planettraining:angular-translate-loader-static-files  2.7.0  Angular Translate
planettraining:angular-translate-loader-url           2.7.0  Angular Translate
planettraining:angular-translate-storage-cookie       2.7.0  Angular Translate
planettraining:angular-translate-storage-local        2.7.0  Angular Translate
selchenkov:angular-bootstrap-ui                       0.0.1  Meteor 
urigo:angular             0.9.0  

Archaeo

Sounds like you've got both ng-app directive in the HTML and app.bootstrap(..), could it be ? – Bartolemo

will look into this now – Archaeo

did a global search for app.bootstrap - nothing. will keep looking – Archaeo

did you find something for your question 4 hours ago? – Prophet

It's probably angular.bootstrap, search for .bootstrap. – Bartolemo

@user1587329 - if you referring to "...is there such thing as SmartAdmin with angular-meteor..." - possibly - wrapbootstrap.com/theme/…. this is the one I have just (3 hours ago) purchased, and now am trying to debug, as it was not working out of the box – Archaeo

found a few of these (it is a large example app): here is one: function onReady() { angular.bootstrap(document, ['angle']); }; here is another one: var bootstrapFct = angular.bootstrap; angular.bootstrap = function(element, modules, config) { // we use slice to make a clean copy angular.forEach(modules.slice(), function(module) { addToLoadList(module); }); Will try and see how to reduce this without further breaking this example app... – Archaeo

You can try to console.log(module) in your angular.forEach and see which one is the last one that logs before the error shows. That will probably be the one that's bootstrapped twice. If it's not, search for all of your ng-app declarations and compare. One will be shown twice. – Bartolemo

I think I found this double bootstrap - it is in one of the example app's modules called ocLazyLoad: function init(element) { if(modulesToLoad.length === 0) { var elements = [element], names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'], NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/, append = function append(elm) { return (elm && elements.push(elm)); }; That being said, I have no idea how not to use this file, or how to change it to avoid double bootstrapping – Archaeo

Would be hard to help you from over here friend :) Usually it's to remove one of the bootstrapping, maybe in the other declaration you found. – Bartolemo

Well, I made a repo : github.com/eugene-goldberg/backend_meteor_angular I would be happy (if it is appropriate) to pay anyone, who is willing to make it work – Archaeo

medium.com/@zfxuan/…, section "Load Order" might be of interest to you. The author has tried to combine angularJS and meteorJS and describes some caveats. – Prophet

This may help: github.com/Urigo/angular-meteor/issues/90 – Ferrocyanide

Answer 1

Issue is with file path of index.ng.html in index.html's ng-include

It should be

<div ng-include="'client/index.ng.html'">
</div>

Path are always absolute , as mentioned in Angular Meteor tutorial

It's very important to note - the paths are always absolute, not relative! so if 'index.ng.html' was inside a client folder, you would have to place the whole path from the route app, doesn't matter where you're calling the file from. like this (e.g. if index.ng.html was in the 'client' folder):

<div ng-include="'client/index.ng.html'"></div>

Albuquerque

Answer 2

It's just because you are calling your body or div inappropriately.

Try:

<div ng-app="app1" ng-controller="controller1">
  <!-- code or UI here -->
</div>

This lets the second render inside of it:

<div id="app" ng-app="app2" ng-controller="controller2">
  <!-- code or UI here -->
</div>

So now you could call:

angular.element(document).ready(function () {
    var appID = document.getElementById('app');
    angular.bootstrap(appID, ['app2']);
});

in your angular controller to avoid conflicts between the two controllers. So both the controllers are atomic hence it's being used in one page.

Aimless