Angular2 beta 11 Cannot read property zone of undefined
<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>