Angular2 beta 11无法读取未定义的属性区域
我正在尝试在我的gulp开发管道上设置浏览器同步,但我似乎无法让重新加载工作。运行gulp start时会打开浏览器选项卡,但重新加载不会导致后续浏览器刷新 我在吞咽文件中遵循的步骤-Angular2 beta 11无法读取未定义的属性区域,angular,gulp,browser-sync,gulp-watch,angular2-zone,Angular,Gulp,Browser Sync,Gulp Watch,Angular2 Zone,我正在尝试在我的gulp开发管道上设置浏览器同步,但我似乎无法让重新加载工作。运行gulp start时会打开浏览器选项卡,但重新加载不会导致后续浏览器刷新 我在吞咽文件中遵循的步骤- gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files. var gulp = require('gulp'); var t
gulp start - Build ts, copy js, libs and index.html. Start express server. Init browser-sync. Setup watch on source files.
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
此外,只有在使用浏览器同步运行时,我才会看到此错误
形象
当我运行standard时,我没有看到上面的错误-
吞咽
node dist/app.js
我已经搜索了所有的地方,但找不到一个让我相信我的吞咽工作流程有问题的例子
另外,当我打开浏览器同步UI时,可能会很方便-
我可以确认
标记是否存在,这就是我的源代码在浏览器上的外观-
<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>
这是回购协议-
编辑:这是我在没有浏览器同步的情况下运行它时的浏览器控制台。
编辑:对于任何有兴趣跟踪我在browser sync repo上提出的问题的进度的人,除了在browser sync repo中创建的问题OP之外,这里还有一个链接-,供参考,请参见Misko(引用) 该错误是由browser-sync-client.2.11.1.js尝试ClearInterval(未定义)引入的 这一问题已在本文中解决,并将使用beta.12在zone.js 0.6.5中发布(请参阅) 更新 BrowserSync的作者@shakyShane对此表示关注,zone.js 0.6.5可能无法真正解决此问题。请关注该问题和这些评论以了解更多信息 更新2
根据@stripathi的反馈,这个问题在beta.12和zone.js 0.6.6中得到了解决。奇怪的事实。我将lite服务器更改为live server,错误消失了。此外,应用程序上的lite服务器更新不会导致页面刷新,而live server页面会自动刷新。只需更新到当前版本:Angular 2.0.0-beta.12,zone.js 0.6.6,以及从对等依赖项中删除es6 promise。正如你在照片中看到的那样
这对我有用。我希望这对其他人有帮助。请阅读本文。beta.11中存在与区域相关的问题。感谢您的评论。然而,如果这是一个问题,它是否也会在常规构建中弹出,我只是构建和托管而没有监视和浏览器同步?是的,它会,就像在这个问题中一样,问题是区域。你可以回到beta.9版,等待beta.12版。查看我的编辑。在任何情况下,您是否认为此浏览器错误可能会阻止浏览器同步绑定到chrome?我编辑了问题的标题,使其更通用,以便其他用户可以轻松访问。我还添加了一个答案,以防有帮助。感谢您编辑并添加您打开的问题@我下载了zone 0.6.5,但没有修复。不是吗?β12是否也会产生角度变化?很抱歉,我完全不知道。是的,您使用的是
angular2 polyfills
,该捆绑包将在新的beta版发布时更新。即使现在你已经安装了zone.js 0.6.5,polyfills仍然有以前的版本。好的,我离将此标记为答案还有一英寸的距离。最后一件事,你知道我是否可以手动修补一些东西(可能是polyfill?)来暂时解决这个问题吗?事实上,你答案的正确性并不取决于你是我的导师,所以如果有机会,请告诉我。同时,我将此标记为答案,无论出于何种意图和目的,这都接近于确定问题并提供信息。Woah刚刚尝试过,效果非常好。我有角度beta.12和zone0.6.6。完全没有错误。