Gulp，浏览器同步不适用于 angularjs ng-view

Question

我正在尝试使用 gulp 和浏览器与 angularjs 同步设置项目。当我在我的 index.html 文件中使用 ng-view 标签时，我无法使浏览器同步正常工作。这是我运行浏览器同步时在浏览器控制台中遇到的错误： Uncaught TypeError: Cannot read property 'data1457531805746' of null 来自 browser-sync-client.2.11.1.js:204 它按预期工作，页面加载正常，当 ng-view/ngRoute 未使用时。

这些是我的文件： ./gulpfile.js

// Spin up a server
gulp.task('browserSync', function() {
  browserSync.use(spa({
  selector: "[ng-app]" //Only needed for angular apps
  }));

  browserSync.init({
    port: 8080,
    server: {
      baseDir: path.src
    }
  })
});

 // Watch for changes in files
 gulp.task('watch', ['browserSync'], function() {
    // Watch .js files -- removed for brevity
  });
 // Default Task
gulp.task('default', ['watch']);

./app/controllers/controllers.js 'use strict';

/* Controllers */

var dc4SearchControllers = angular.module('dc4SearchControllers', []);

dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
  function($scope, $http){
    $scope.test = 'Hello, world!';
}]);

./app/index.html

<html ng-app="dc4SearchApp">
<head>
  <link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
  <script src="/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="/bower_components/angular/angular.min.js"></script>
  <script src="/bower_components/angular-route/angular-route.min.js">    </script>
  <script src="/bower_components/lodash/lodash.min.js"></script>
  <script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
  <script src="app.js"></script>
  <script src="controllers/controllers.js"></script>
</head>
<body ng-view>

</body>
</html>

./app/app.js 'use strict';

/* App Module */

var dc4SearchApp = angular.module('dc4SearchApp', [
  'ngRoute',
  'dc4SearchControllers'
]);

dc4SearchApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/company-search', {
        templateUrl: 'views/company-search.html',
        controller: 'CompanySearchCtrl'
      }).
      otherwise({
        redirectTo: '/company-search'
      });
  }]);

./app/views/company-search.html

<div ng-controller="CompanySearchCtrl">
  <a href="#" class="button confirm">{{test}}</a>
  <div class="spinner spin"> </div>
</div>

我希望这只是我看过但还没有尝试过的愚蠢而简单的事情！提前致谢。

Answer 1

"Browsersync works by injecting an asynchronous script tag right after the body tag during initial request. In order for this to work properly the body tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions" https://www.npmjs.com/package/browser-sync

Browsersync 似乎正在重新加载 body 标签。您是否尝试将 ng-view 移动到另一个 child div ？

Gulp，浏览器同步不适用于 angularjs ng-view

Gulp, browser sync does not work with angularjs ng-view

angularjs

gulp

browser-sync