Issue with jQuery + Angular - TypeError: o is null

Only when trying to load jQuery before Angular in our bower.json file we get an error

TypeError: o is null

…getTime();this.getData=function(o){var r=o[n];return r||(r=o[n]=e++,t[r]={}),t[…

(line 204, col 6710)

Bower.json

{ “name”: “xxxxxx”, “private”: true, “version”: “0.8.0”, “dependencies”: { “jquery”: “~2.1.4”, “angular”: “1.3.15”, “angular-animate”: “1.3”, “angular-bootstrap”: “0.12.0”, “angular-bootstrap-datetimepicker”: “~0.3.8”, “angular-chart.js”: “~0.8.4”, “angular-chosen-localytics”: “~1.0.7”, “angular-cookies”: “1.3.10”, “angular-facebook”: “latest”, “angular-file-upload”: “~2.1.1”, “angular-gestures”: “~0.3.0”, “angular-google-places-autocomplete”: “~0.2.5”, “angular-ladda”: “latest”, “angular-loading-bar”: “~0.7.0”, “angular-local-storage”: “~0.1.5”, “angular-lodash”: “~0.1.2”, “angular-media-queries”: “~0.3.0”, “angular-moment”: “latest”, “angular-motion”: “~0.4.2”, “angular-payments”: “latest”, “angular-pretty-checkable”: “~0.1.5”, “angular-resource”: “1.3.10”, “angular-sanitize”: “~1.3.10”, “angular-slick”: “~0.1.18”, “angular-slugify”: “latest”, “angular-socialshare”: “~0.0.6”, “angular-strap”: “~2.3.1”, “angular-summernote”: “~0.4.0”, “angular-swing”: “*”, “angular-timer”: “./vendor/angular-timer”, “angular-touch”: “~1.3.10”, “angular-ui-router”: “~0.2.13”, “angular-ui-select”: “~0.9.6”, “angulartics”: “~0.17.2”, “angulike”: “~1.2.0”, “ckeditor”: “~4.5.1”, “ladda”: “./vendor/ladda”, “lodash”: “latest”, “ng-ckeditor”: “~0.2.1”, “ng-plangular”: “./vendor/ng-plangular”, “ng-sortable”: “~1.3.0”, “ngImgCrop”: “./vendor/ngImgCrop”, “offline”: “~0.7.11”, “ryanmullins-angular-hammer”: “~2.1.10” }, “devDependencies”: {}, “resolutions”: { “angular”: “1.3.15” } }

package.json

{ “name”: “xxxx”, “private”: true, “version”: “0.8.10”, “devDependencies”: { “browser-sync”: “^2.7.13”, “browser-sync-spa”: “^1.0.2”, “connect-history-api-fallback”: “^1.1.0”, “connect-modrewrite”: “^0.7.9”, “del”: “^1.1.1”, “fs”: “0.0.2”, “gulp”: “^3.9.0”, “gulp-autoprefixer”: “^2.1.0”, “gulp-buffer”: “0.0.2”, “gulp-bump”: “^0.3.0”, “gulp-concat”: “^2.5.2”, “gulp-connect”: “^2.2.0”, “gulp-csso”: “^1.0.0”, “gulp-filter”: “^2.0.2”, “gulp-flatten”: “0.0.4”, “gulp-if”: “^1.2.5”, “gulp-imagemin”: “^2.2.1”, “gulp-inject”: “^1.2.0”, “gulp-inline-angular-templates”: “^0.1.5”, “gulp-jade”: “^1.0.0”, “gulp-jsbeautifier”: “0.0.8”, “gulp-less”: “^3.0.2”, “gulp-load-plugins”: “^0.9.0”, “gulp-minify-html”: “^1.0.2”, “gulp-ng-annotate”: “^0.5.2”, “gulp-ng-constant”: “^0.3.0”, “gulp-notify”: “^2.2.0”, “gulp-order”: “^1.1.1”, “gulp-print”: “^1.1.0”, “gulp-rename”: “^1.2.2”, “gulp-rev”: “^3.0.1”, “gulp-rev-replace”: “^0.4.0”, “gulp-strip-debug”: “^1.0.2”, “gulp-uglify”: “^1.1.0”, “gulp-unique-files”: “^0.1.2”, “gulp-watch”: “^4.2.3”, “gulp-webserver”: “^0.9.1”, “main-bower-files”: “^2.6.2”, “require-dir”: “^0.3.0”, “run-sequence”: “^1.0.2”, “streamqueue”: “^0.1.3”, “yargs”: “^3.7.0” } }

gulpfile.js

'use strict';

global.gulp = require('gulp');
global.fs = require('fs');

global.$ = require('gulp-load-plugins')({
  lazy: true,
  pattern: [
    'gulp-*', 'del', 'main-bower-files', 'streamqueue', 'browser-sync-spa',
    'run-sequence', 'yargs', 'browser-sync'
  ]
});

var historyApiFallback = require('connect-history-api-fallback');

global.reload = $.browserSync.reload;

global.args = require('yargs').argv;
// global.config = require('./gulp/gulp.config')();

global.appEnv = args.env || 'development';
global.optimize = appEnv !== 'development';
global.development = appEnv === 'development';

// require all gulp tasks in the ./gulp/** directory
require('require-dir')('./gulp');

var files = fs.readdirSync('app/components');
var components = [];
files.forEach(function(file){
  var isDirectory = fs.statSync(('app/components/' + file)).isDirectory();
  if(isDirectory){
    components.push(file);
    (function(file) {
      gulp.task('build_' + file, function(done) {
        global.componentName = file;
        global.buildPath = (appEnv === 'development') ? ('.tmp/' + file) : ('dist/' + file);
        global.srcPath = 'app/components/' + file;

        $.runSequence('clean', 'assets', 'javascript', 'css', 'html', 'cleanManifest');
        return done();
      });

      gulp.task(file, ['build_' + file], function(){
        // gulp.src('./.tmp/' + file)
        //   .pipe($.print())
        //   .pipe($.webserver({
        //     fallback: 'index.html'
        //   }));

        $.browserSync.use($.browserSyncSpa({
          selector: "[ng-app]"
        }));

        $.browserSync.init({
          server: './.tmp/' + file,
          port: 9000,
          debugInfo: false,
          open: false,
          ghostMode: false
        });

        // $.connect.server({
        //   root: './.tmp/' + file
        //   // middleware: function(connect, opt){
        //   //   return [ historyApiFallback ];
        //   // }
        // });

        gulp
          .watch([srcPath + '/**/*.less', 'app/shared/**/*.less'], ['css']);

        gulp
          .watch([srcPath + '/**/*.js', 'app/shared/**/*.js'], ['javascript'])
          .on('change', function(file) {
            console.log(file);

            gulp
              .src(file.path, { base: './' })
              .pipe($.jsbeautifier({ config: '.jsbeautifyrc', mode: 'VERIFY_AND_WRITE' }))
              .pipe(gulp.dest('./'));
          });

        gulp.watch([srcPath + '/**/*.jade', 'app/shared/**/*.jade'], ['html']);
        gulp.watch([srcPath + '/common/assets/**/*'], ['assets']);
      });

    })(file);
  }
});

gulp.task('default', components);

[michaeleekk]

I had similar issue seeing

Uncaught TypeError: Cannot read property ‘data1455532798166’ of null

when I have ui-view attribute on <body>.

<body ui-view>
  <div></div>
</body>

As Browser Sync will automatically inject code into <body>, angular will load the content and initialized Browser Sync the second time. So my fix is to make Browser Sync injecting into <head> instead,

browserSync {
  snippetOptions: {
    rule: {
      match: /<\/head>/i
      fn: (snippet, match) {
        return snippet + match;
      }
    }
  }
}

Of course, you may also move the ui-view attribute to a <div> instead of adding on <body>.

Hope it helps.

[biblicalph]

Hi, I believe I am facing a similar issue although I am using version 2.11.0.

I get this error: Cannot read property ‘data1452510465133’ of null and only happens if I include jquery before angular.

Any help would be appreciated. Thanks