Angularjs 具有角度混合的无限$摘要循环

我开始用Angular2升级angularjs

我正在使用systemjs

一旦我使用了lodahs，我就得到了无限的$digest循环

LODAH通过npm安装。此外，我还有来自bower的lodash

错误

My system.config.js 我的组件

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
从“lodash”导入*作为测试；
@组成部分({
选择器：“主cmp”，
模板：`
测试
`
})
导出类主组件{
@Input（）id:string；
@Input（）名称：string；
@Output（）事件：EventEmitter=neweventemitter（）；
计数器=0；
构造函数（）{
map（[{id:2}，{id:1}]，{id:1}）；
}
更新（值）{
this.name=值；
}
ngAfterViewInit（）{
设置间隔（（）=>{
这个.counter++；
},1000);
}
}

我发现我使用的是“restanglar”：“1.4.0”，它使用的是旧的lodash版本

---

升级到“restangular”后：“1.6.1”使用了最新的lodash，它解决了我的问题

我在项目中也遇到了类似的错误。为了避免混合应用程序的所有问题和性能，我建议使用-it将AngularJS引导到角度区域之外，并将两个变化检测系统分开

(function (global) { 

 // Alias the path to the common rc1 vendor scripts.
  var paths = {
    "npm": "node_modules"
  };

  //map tells the System loader where to look for things
  var map = {
    '@sizmek': 'npm/@sizmek',
    '@angular': 'npm/@angular',
    'rxjs': 'npm/rxjs',
    'lodash': 'npm/lodash',
    'ng2-webstorage': 'npm/ng2-webstorage'
  };

  // add your angular 2 package here
  var ngPackageNames = [
    "compiler",
    "forms",
    "core",
    "common",
    "platform-browser",
    "platform-browser-dynamic",
    "http"
  ];

  // add your nxt package here
  var nxtPackageNames = [

  ];

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    "ng2-webstorage": {
      main: 'bundles/core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/upgrade/static': {
      main: '../bundles/upgrade-static.umd.js',
      defaultExtension: 'js'
    },
    'rxjs': {main: "Rx.js", defaultExtension: 'js'},
    'lodash': {main: "lodash.js", defaultExtension: 'js'},
    'angular2': {main: 'ng2boot.js', defaultExtension: 'js'}
  };

  nxtPackageNames.forEach(
    function iterator(packageName) {
      packages["@sizmek/" + packageName] = {
        main: ( "dist/bundles/index.umd.js" ),
        defaultExtension: 'js'
      };
    }
  );

  ngPackageNames.forEach(
    function iterator(packageName) {
      packages["@angular/" + packageName] = {
        main: ( "bundles/" + packageName + ".umd.js" ),
        defaultExtension: 'js'
      };
    }
  );


  var config = {
    paths: paths,
    map: map,
    packages: packages,
    transpiler: "ts",
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      typescript: {
        exports: "ts"
      },
      lodash: { format: 'amd' }
    }
  };

  System.config(config);

  System.import('angular2').catch(function(err){ console.error(err); });

})(this);

import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as test from "lodash";


@Component({
  selector: 'main-cmp',
  template: `
  test
  `
})
export class MainComponent {
  @Input() id: string;
  @Input() name: string;
  @Output() events: EventEmitter<any> = new EventEmitter();
  counter = 0;

  constructor() {
    test.map([{id:2},{id:1}], {id:1});
  }

  update(value) {
    this.name = value;
  }

  ngAfterViewInit() {
    setInterval(() =>{
      this.counter++;
    },1000);
  }

}