Angular2 beta 11 无法读取未定义的属性区域

Question

我正在尝试在我的 gulp 开发管道上设置浏览器同步，但我似乎无法重新加载。当我运行 gulp 启动时，浏览器选项卡打开，但重新加载不会导致后续浏览器刷新。

我在 gulp 文件中遵循的步骤 -

gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.

此外，只有当我运行使用浏览器同步时，我才会看到这个错误图片当我运行标准时，我没有看到上述错误 - gulp 节点 dist/app.js

我找遍了所有地方，但找不到让我相信我的 gulp 工作流程有问题的示例。

还有一点可能会派上用场，就是当我打开浏览器同步时 UI -

我可以确认 <body> 标签存在，这是我的源代码在浏览器上的样子 -

<html>

<head>
    <base href="/">
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body><script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

<script src="lib/es6-shim.min.js"></script>
    <script src="lib/system-polyfills.js"></script>
    <script src="lib/shims_for_IE.js"></script>
    <script src="lib/angular2-polyfills.js"></script>
    <script src="lib/system.src.js"></script>
    <script src="lib/Rx.js"></script>
    <script src="lib/angular2.dev.js"></script>
    <script src="lib/router.dev.js"></script>
    <script src="lib/http.dev.js"></script>
    <script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/main')
        .then(null, console.error.bind(console));
    </script>
    <my-app>Loading...</my-app>
</body>

</html>

我可以看到此处呈现的浏览器同步脚本标记。

我在这里完全不知所措。有人可以帮我解决这个问题/确定这是否是浏览器同步本身的问题？

这是我的 gulp 文件 -

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

这是回购 - https://github.com/saumyatripathi/angular_2_gulp_workflow

编辑：这是我运行没有浏览器同步时的浏览器控制台。

编辑：对于任何有兴趣跟踪我在浏览器同步回购中提出的问题的进展的人，这里是 link - https://github.com/BrowserSync/browser-sync/issues/1037

Answer 1

除了在 BrowserSync 存储库中创建的问题 OP 之外，参考来自 Misko 的 comment（引用）

The error is introduced by browser-sync-client.2.11.1.js trying to clearInteval(undefined)

在这个pull request and will land in zone.js 0.6.5 with beta.12 (see #7700)

中解决了

更新

关于这个来自 BrowserSync 的作者@shakyShane 的 comment，zone.js 0.6.5 可能无法真正解决这个问题。请关注该问题和这些评论以获取更多信息。

更新 2

根据@stripathi 的反馈，此问题已在 beta.12 和 zone.js 0.6.6 中解决。

Answer 2

奇怪的事实。我将 lite-server 更改为 live-server，错误消失了。此外，应用程序上的精简服务器更新不会导致页面刷新，实时服务器页面会自动刷新。

Answer 3

只需更新到当前版本：Angular 2.0.0-beta.12, zone.js 0.6.6，并且 从 peerDependency 中移除 es6-promise。正如您在 latest CHANGELOG

中看到的

它对我有用。希望对大家有帮助。

Angular2 beta 11 无法读取未定义的属性区域

Angular2 beta 11 Cannot read property zone of undefined

gulp

gulp-watch

browser-sync

angular2-zone

angular

Angular2 beta 11 无法读取未定义的 属性 区域

Angular2 beta 11 Cannot read property zone of undefined

gulp

gulp-watch

browser-sync

angular2-zone

angular

Angular2 beta 11 无法读取未定义的属性区域