Search code examples
jqueryangularjsmeanjs

Adding jQuery dependency breaks meanJS application


I have a meanJS application that was using jQlite but now needs full jQuery functionality. When I added the jquery dependency to all.js:

lib: {
        css: [
            'public/app.css',
            'public/lib/bootstrap/dist/css/bootstrap.css',
            'public/lib/bootstrap/dist/css/bootstrap-theme.css',
            'public/lib/angular/angular-csp.css'
        ],
        js: [
            'public/lib/jquery/dist/jquery.js',
            'public/lib/angular/angular.js',
            'public/lib/Chart.js/Chart.js',
            'public/lib/momentjs/min/moment.min.js',
            'public/lib/momentjs/min/locales.min.js',
            'public/lib/humanize-duration/humanize-duration.js',
            'public/lib/angular-timer/dist/angular-timer.js',
            'public/lib/countdown360/dist/jquery.countdown360.js'
        ]
    },

every page I load now tries to bootstrap angular twice. One function call is from my code file, application.js, and the second function call, the one that throws the error, is coming from VM703, which has the same text as the actual file.

Why is my code running from a non file and how I stop it? The only time I've seen VMx before as a file is if my console commands throw errors, or on sites like jsFiddle/codepen that create "files" to run.

EDIT: "Breaks" refers to bootstrapping the application a 2nd time. My application.js file runs, bootstrapping angular as desired, then a virtual copy of it runs, throwing an error and appearing to permanently slow down the webpage.


Solution

  • I think this might solve your issue.

    When you add JQuery, your application evaluates twice tags inside an ng-view, thus, I am assuming your scripts are loading in the <body>, where you placed your ng-view. If so, moving your ng-view into a <div does it as well as moving your <script> to <head>