Ich versuche Browser-Sync auf meinem Schluck-Pipeline für die Entwicklung zu konfigurieren, aber ich kann nicht scheinen, um das Nachladen funktioniert. Eine Browser-Registerkarte wird geöffnet, wenn ich gulp start starte, aber das erneute Laden führt nicht zu einer nachfolgenden Aktualisierung des Browsers.Angular2 Beta 11 Kann nicht lesen Eigenschaftszone von undefined
Schritte, die ich in meinem gulpfile folgen -
gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.
Auch gibt es diese Fehler, die ich nur sehen, wenn ich mit Browser-sync Bild ich laufe nicht den obigen Fehler sehen, wenn ich Standard laufen - schluck node dist/app.js
Ich habe überall gesucht, kann aber kein Beispiel finden, das mich glauben lässt, dass etwas mit meinem Schluck-Workflow nicht stimmt.
auch etwas, das nützlich sein kann, ist, dass, wenn ich öffne Browser Sync UI - 
kann ich bestätigen, dass der <body>-Tag vorhanden ist, und das ist, was meine Quelle wie auf Browser aussieht -
<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>
Ich kann das Browser-Sync-Skript-Tag hier gerendert sehen.
Ich bin hier total verloren. Könnte mir jemand dabei helfen/identifizieren, wenn dies ein Problem mit der Browser-Synchronisierung selbst ist?
Hier ist meine gulpfile -
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
Hier ist der Repo - https://github.com/saumyatripathi/angular_2_gulp_workflow
EDIT: Hier ist die Browser-Konsole ist, wenn ich es ohne Browser-Synchronisierung durchführen. 
EDIT: Für alle Interessierten in den Fortschritt der Issue-Tracking-I auf Browser-Sync-Repo angehoben, hier ist der Link - https://github.com/BrowserSync/browser-sync/issues/1037
Lesen Sie von diesem [Kommentar] (https://github.com/angular/angular/issues/7652#issuecomment-198744682). Es gibt Probleme in der Beta.11 bezüglich Zonen. –
Danke für den Kommentar. Wenn dies jedoch das Problem wäre, würde es dann auch nicht mit regulären Builds auftauchen, wo ich nur ohne Watch und Browser-Sync bilde und hosste? – stripathi
Ja, es wäre, wie in dieser Frage http://stackoverflow.com/q/36120808/4933038, das Problem ist Zone. Du könntest zurück zu beta.9 gehen und auf beta.12 warten. –