Я пытаюсь настроить синхронизацию браузера на моем конвейере gulp для разработки, но я не могу заставить перезагружать работу. При запуске запуска gulp открывается вкладка браузера, но перезагрузка не вызывает последующего обновления браузера.Angular2 beta 11 Невозможно прочитать зону свойств неопределенного
Шаги, которые я следую в моем gulpfile -
gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.
Кроме того, есть эта ошибка, что я вижу только тогда, когда я бегу с браузером-синхронизации изображения я не вижу выше ошибки, когда я бегу стандарт - gulp node 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>
Я вижу здесь отображаемый здесь тег сценария браузера-синхронизатора.
Я полностью потерял здесь. Может ли кто-нибудь помочь мне с этим/определить, если это проблема с самой синхронизацией браузера?
Вот мой 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
Вот репо - https://github.com/saumyatripathi/angular_2_gulp_workflow
EDIT: Вот консоли браузера, когда я запускаю его без браузера-синхронизации.
EDIT: Для тех, кто заинтересован в отслеживании прогресса в вопросе, который я поставил на браузере синхронизации репо, вот ссылка - https://github.com/BrowserSync/browser-sync/issues/1037
Читайте об этом [комментарий] (https://github.com/angular/angular/issues/7652#issuecomment-198744682). В бета-версии есть проблемы, связанные с зонами. –
Спасибо за комментарий. Однако, если это была проблема, не будет ли она также появляться с регулярной сборкой, где я просто создаю и размещаю без просмотра и синхронизации с браузером? – stripathi
Да, это было бы, как в этом вопросе http://stackoverflow.com/q/36120808/4933038, проблема в зоне. Вы можете вернуться к бета-версии 9 и дождаться бета-версии.12. –