Css 浏览器与模块加载程序同步（angular2和systemjs）

我正在用angular2和systemjs构建一个单页应用程序。我还使用gulp将typescript编译成javascript，因为我不想公开typescript模块

我还使用了一个gulp watcher和gulp browser sync

因为angular2是基于web组件的，并且在运行时使用模块加载器进行注入，所以所有模板和样式也在运行时注入

头牌

…

不包含任何css文件，因为angular正在运行时的components dom元素中应用每个组件的样式

因此，如果浏览器同步检测到某些更改，它必须重新加载整个页面

有人知道在使用angular 2时实现浏览器同步而不需要重新加载整个页面的解决方案吗？

下面是我的吞咽任务，它将修改后的css输送到browsersync：

gulp.task('copy:css', ['copy:thirdparty-css', 'copy:css-global'], function() {
    var stream = gulp.src(paths.scssSourceApp)
        .pipe(autoprefixer())
        .pipe(sass().on('error', sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest(paths.cssDestFolderApp));

    if (development()) {
        stream.pipe(browserSync.stream());
    }
    return stream;
});

以下是浏览器同步初始化和gulp watcher：

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "https://localhost:44387"
    });
});

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch([paths.scssSourceApp, 
    paths.scssSourceGlobal, 
    paths.appSource, 
    paths.templateSource], 
    ['copy:templates','copy:css','compile:ts']);
});