title: Angular2 beta 11 Cannot read property zone of undefined
body: <p>I am trying to setup browser-sync on my gulp pipeline for development but I can't seem to get the reload working. A browser tab is opened when I run gulp start but reload doesn't cause subsequent browser refresh.</p>
  
  <p>Steps that I follow in my gulpfile -</p>
  
  <pre><code>gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.
  </code></pre>
  
  <p>Also, there's this error that I see only when I run with browser-sync
  image
  I do not see the above error when I run standard -
      gulp
      node dist/app.js</p>
  
  <p>I have searched all over the place but can't find an example which leads me to believe that there is something wrong with my gulp workflow.</p>
  
  <p>Also something that may come in handy is that when I open browser sync UI - 
  <a href="https://i.stack.imgur.com/qkhnp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qkhnp.png" alt="Chrome dev tools - issued error"></a></p>
  
  <p>I can confirm that the <code>&lt;body&gt;</code> tag is present and this is what my source looks like on browser -</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;base href="/"&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;&lt;script type='text/javascript' id="__bs_script__"&gt;//&lt;![CDATA[
      document.write("&lt;script async src='/browser-sync/browser-sync-client.2.11.1.js'&gt;&lt;\/script&gt;".replace("HOST", location.hostname));
  //]]&gt;&lt;/script&gt;
  
  &lt;script src="lib/es6-shim.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/system-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="lib/shims_for_IE.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="lib/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="lib/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="lib/router.dev.js"&gt;&lt;/script&gt;
      &lt;script src="lib/http.dev.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      System.config({
          packages: {
              app: {
                  format: 'register',
                  defaultExtension: 'js'
              }
          }
      });
      System.import('app/main')
          .then(null, console.error.bind(console));
      &lt;/script&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I can see the browser-sync script tag rendered here.</p>
  
  <p>I am totally at loss here. Could someone help me out with this/ identify if this is an issue with browser-sync itself?</p>
  
  <p>Here's my gulpfile -</p>
  
  <pre><code>var gulp = require('gulp');
  var tsc = require('gulp-typescript');
  var tsProject = tsc.createProject('client/tsconfig.json');
  var sourcemaps = require('gulp-sourcemaps');
  var config = require('./gulp.config')();
  var del = require('del');
  var browserSync = require('browser-sync').create();
  var reload = browserSync.reload;
  var node;
  var spawn = require('child_process').spawn;
  var path = require('path');
  
  gulp.task('clean', function() {
      return del(config.distDir);
  });
  
  gulp.task('server', ['clean'], function() {
      return gulp.src(config.nodeHost)
          .pipe(gulp.dest(config.distDir))
  });
  
  gulp.task('lib', ['clean'], function() {
      return gulp.src(config.angularLibraries)
          .pipe(gulp.dest(path.join(config.distDir,'client','lib')));
  });
  
  gulp.task('compile-ts', ['clean'], function() {
      var sourceTsFiles = [
          config.allTs,
          config.typings
      ];
  
      var tsResult = gulp.src(sourceTsFiles)
          .pipe(sourcemaps.init())
          .pipe(tsc(tsProject));
  
      return tsResult.js
          .pipe(sourcemaps.write('.'))
          .pipe(gulp.dest(path.join(config.distDir,'client')));
  });
  
  gulp.task('index', ['compile-ts', 'lib', 'clean'], function() {
      return gulp.src(config.indexFile)
          .pipe(gulp.dest(path.join(config.distDir,'client')));
  });
  
  gulp.task('build', ['compile-ts', 'lib', 'index', 'server']);
  gulp.task('default', ['build']);
  
  // Deveopment serve tasks - start
  
  gulp.task('watch', function() {
      gulp.watch(['./app.js', '!./dist/**', './client/**'], ['stop', 'reload']);
  });
  
  gulp.task('browser-sync', ['nodestart'], function() {
      browserSync.init(null, {
          proxy: "http://localhost:3001",
          port: 7000,
      });
  });
  
  gulp.task('reload-browser-sync', ['nodestart'], function() {
      reload();
  });
  
  gulp.task('nodestart', ['build'], function() {
      node = spawn('node', ['dist/app.js'], { stdio: 'inherit' })
      node.on('close', function(code) {
          if (code === 8) {
              gulp.log('Error detected, waiting for changes...');
          }
      });
  });
  
  gulp.task('start', ['build', 'nodestart', 'watch', 'browser-sync']);
  gulp.task('reload', ['build', 'nodestart', 'reload-browser-sync']);
  gulp.task('stop', function() {
      if (node) node.kill();
  });
  
  // Deveopment serve tasks - end
  </code></pre>
  
  <p>Here's the repo - <a href="https://github.com/saumyatripathi/angular_2_gulp_workflow" rel="nofollow noreferrer">https://github.com/saumyatripathi/angular_2_gulp_workflow</a></p>
  
  <p>EDIT: Here's the browser console when I run it without browser-sync. 
  <a href="https://i.stack.imgur.com/MqVCT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MqVCT.png" alt="No error on console"></a></p>
  
  <p>EDIT: For anyone interested in tracking the progress of the issue I raised on browser-sync repo, here's the link - <a href="https://github.com/BrowserSync/browser-sync/issues/1037" rel="nofollow noreferrer">https://github.com/BrowserSync/browser-sync/issues/1037</a></p>