2016-03-20 5 views
2

Я пытаюсь настроить синхронизацию браузера на моем конвейере 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 - Chrome dev tools - issued error

Я могу подтвердить, что <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: Вот консоли браузера, когда я запускаю его без браузера-синхронизации. No error on console

EDIT: Для тех, кто заинтересован в отслеживании прогресса в вопросе, который я поставил на браузере синхронизации репо, вот ссылка - https://github.com/BrowserSync/browser-sync/issues/1037

+0

Читайте об этом [комментарий] (https://github.com/angular/angular/issues/7652#issuecomment-198744682). В бета-версии есть проблемы, связанные с зонами. –

+0

Спасибо за комментарий. Однако, если это была проблема, не будет ли она также появляться с регулярной сборкой, где я просто создаю и размещаю без просмотра и синхронизации с браузером? – stripathi

+0

Да, это было бы, как в этом вопросе http://stackoverflow.com/q/36120808/4933038, проблема в зоне. Вы можете вернуться к бета-версии 9 и дождаться бета-версии.12. –

ответ

2

Для справки, кроме выпуска OP, созданного в BrowserSync репо, за это comment от Мисько (со ссылкой)

ошибка вводится с помощью браузера-SYNC-client.2.11.1.js пытается clearInteval (неопределенный)

Какой была решена в этом pull request и приземлится в zone.js 0.6.5 с beta.12 (см #7700)

Update

Что касается этого comment от @shakyShane, автор BrowserSync, в zone.js 0,6 .5 может и не решить эту проблему. Следуйте этой проблеме и этим комментариям для получения дополнительной информации.

Update 2

Согласно @ stripathi-х обратной связи этот вопрос был решен в beta.12 и zone.js 0.6.6.

+0

ну, я скачал зону 0.6.5, и это не исправить. Не так ли? Есть ли изменения в угловом тоже, что выйдет с beta12? Извините за мое полное невежество. – stripathi

+0

Да, вы используете 'angular2-polyfills', и этот пакет будет обновляться при выпуске новой беты. Даже теперь, когда вы установили zone.js 0.6.5, полиполки все еще имеют предыдущую версию. –

+0

Хорошо, я вдалеке от того, чтобы отметить это как ответ. Только одна последняя услуга, знаете ли вы, могу ли я исправить что-то (возможно, полифоры?) Вручную, чтобы сделать эту работу на данный момент? – stripathi

0

Странный факт. Я изменил lite-сервер на live-сервер, и ошибка исчезла. Кроме того, при обновлении lite-сервера в приложении не возникало обновление страницы, при этом обновленная страница обновляется автоматически.

0

обновление Только в текущей версии: Угловая 2.0.0-beta.12, zone.js 0.6.6 и удалить ES6-обещание от peerDependency. Как вы можете видеть в latest CHANGELOG

Это работает для меня. Надеюсь, это поможет другим.