带有角度混合的无限$ digest循环

Question

我开始用angular 2升级angularjs。

我正在使用systemjs。

一旦我使用了lodahs，我就会获得Infinite $ digest循环。

lodahs通过npm安装，此外我还有凉亭里的lodash。

错误

我的system.config.js

(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);
  }

}

Answer 1

我发现我正在使用“restangular”：“1.4.0”，它使用旧的lodash版本 在我升级到“restangular”之后：“1.6.1”使用最新的lodash它解决了我的问题

Answer 2

我在该项目上有类似的错误。为了避免$digest和混合应用程序性能上的所有问题，我建议使用downgradeModule-它将AngularJS引导到Angular区域之外，并将两个变更检测系统分开。