我有一个使用angular-cli构建的角度2应用程序,我需要在我的一个组件中使用角度1指令(从不同的应用程序重用它).我按照以下步骤操作：

https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angular-1-component-directives-from-angular-2-code

但现在我遇到了这个错误,无法超越它.我正在使用angular2.0.2(我设法在过去使用beta版本构建了一个混合应用程序,但它是一个angular1应用程序,我使用角度2组件与适配器的降级功能).

在我的app.module.ts中我有：

import { UpgradeAdapter } from '@angular/upgrade';
const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

const HeroDetail = upgradeAdapter.upgradeNg1Component('heroDetail');

@NgModule({
    imports:      [
        browserModule,...
    ],declarations: [
      ...       
     HeroDetail
     ]
})
export class AppModule { }

我的hero-detail.component.ts看起来像这样：

export const heroDetail = {
  templateUrl: 'hero-detail.html',controller: function() {
  }
};

而我的hero-detail.html看起来像这样：

<h2>Windstorm details!</h2>

我只是通过添加模板尝试在另一个角度2组件中使用该指令：

当我运行服务时,应用程序编译正常,但当我尝试加载页面时,我得到上述错误.

关于如何向前推进的任何建议？

看来你的引导逻辑不正确.

它实际上不是很明显,请确保：

>你不用@NgModule({bootstrap：[…]})引导任何ng2组件.相反,您应该在主模块中使用空的ngdobootstrap(){}方法.
>根模板是ng1模板.即在index.html中,您应该只有ng1组件或降级的ng2组件.您可以将ng2组件作为根,但是您需要先将其降级.

官方升级指南包含DOM结构的示例：

…确保ng2注射器具有ng1所需的所有提供者.

我非常绝望地来找你 – 现在已经为此工作了两天.

我们有一个使用Angular JS构建的单页面应用程序.我们在HTML5模式下使用$routeProvider来实现SPA路由.功能明智 – 一切都很棒！

我们有一个连接到body元素的全局控制器,标题中有一个控制器用于快速搜索功能,所有其他控制器都作用于路径.控制器之间共享一些数据,如currentUser对象和包含用户所选语言的字符串值的ViewRes对象.

但是,我们注意到Chrome服务为我们的页面占用了太多内存.我使用Chrome Profiles工具查看发生了什么.我禁用了大多数使用复杂指令的代码,只省略了基础知识.内存消耗降低了很多,但显然仍然存在.每当我更改页面时,内存都会增加.

在堆快照中,它显示大多数内存由(闭包)和(数组)占用.分离的DOM树也很大.请注意,这些快照包含我们应用程序的基本元素(页眉,页脚和轻量级内容).如果我包含我们复杂的UI组件,那么内存从14MB跳到50MB到140MB ……等等.显然我们会照顾这些指令,但我担心我们的问题是全局性的,而不仅仅是对指令的错误设计.

当我打开(数组)元素时,我注意到它们中有一堆具有浅的大小和保留的大小6172.跟踪该对象的范围总是导致一些ng指令,如ngShow,ngIf …

从图像中可以看出,树在’cache in function()’中结束.我们使用Angular 1.3.6.

编辑：这个项目还包括jQuery.我们使用的是jQuery 1.8.2,当我切换到1.11.2时,在简单页面(简单的ng-repeats和简单模型)之间切换不再导致内存泄漏(不再有分离的DOM元素).

现在复杂的指令仍然给了我太多的分离元素,所以我现在要处理那些,当我找到原因时我会在这里发布结果.

很难说出你的具体问题是什么,但Angular内存泄漏的常见地方包括$interval,$watches和事件处理程序.除非您在控制器拆除时明确删除它,否则这些函数中的每一个都会创建一个未清除的闭包.

$interval特别令人讨厌,因为它会继续运行,直到你关闭浏览器或网页 – 即使用户移动到不同的选项卡或应用程序,它也不会停止运行！

如果在这些闭包中创建对DOM元素的引用,您很快就会开始咀嚼内存,因为从不会释放引用,并且当用户从一个页面移动到另一个页面时,DOM树会分离.

要解决此问题,请确保在控制器(以及指令的控制器或链接函数)中处理$destroy事件,并在使用任何间隔,监视或事件处理程序后明确清理.

您可以通过保持对每个$interval,watch或事件处理程序的引用并在$destroy事件处理程序中将其作为函数调用来完成此操作.

例如：

// eventListener to remove
var eventListener = $scope.$on('eventName',function(){…});

// remove the eventListener when the $destroy event is fired
$scope.$on('$destroy',function(){
    // call the value returned from $scope.$on as a function to remove
    // the event listener
    eventListener();
}

// remove an event listener defined on a DOM node:
var elementEventListener = element.on('eventName',function(){…});

element.on('$destroy',function(){
    elementEventListener();
}

// Stop an interval
var stop = $interval(function(){...});
$scope.$on('$destroy',function(){
    stop();
}


// Finally,unbind a  $watch
var watchFn = $scope.$watch('someValue',function(newVal){…}

$scope.on('$destroy',function(){
     watchFn();
}

最后,永远不要在范围内存储DOM元素！ (参见#2 here点的原因).

我有一个场景,我需要非角度代码(在这种情况下Facebook和Twitter JS sdk)来广播角度控制器可以收听的事件.为什么？在初始页面加载后,我通过 AJAX加载和修改页面中的内容.内容有多个喜欢/推特按钮(如博客/聚合器的首页).我想在Facebook“喜欢”按钮或Twitter“分享”按钮上发生点击时添加事件挂钩 – 页面中有一些,每当获取新内容时每个都在变化(再次,通过ajax ).

现在,SDK的处理方式不同：

推特

twttr.events.bind('click',function(event){
    // here I'd like to somehow
    // $rootScope.$broadcast("twitter:clicked",event.currentTarget)
});

Facebook的

FB.Event.subscribe("edge.create",function(resp) {
    // here I'd like to somehow
    // $rootScope.$broadcast("facebook:clicked",resp)
});

一些控制器

app.controller("SomeController",['$scope',function($scope) {
    $scope.$on("facebook:clicked",function(event,resp) {
        // do something with resp
    });

    $scope.$on("twitter:clicked",target) {
        // do something target
    });
}])

我们的想法是绑定这些事件处理程序,然后处理相关控制器中的广播消息,即使每次获取新内容时都会重新创建这些控制器.

所以基本上,我正在寻找的是一种方法来挂钩现有的已经初始化的角度应用程序的$rootScope和$广播消息,尽管不是应用程序的一部分.希望这是有道理的.谢谢.

您可以绑定到Angular代码中的其他应用程序(在最有可能创建链接的指令中).这样您就可以访问$rootScope.

或者,如果您手动引导应用程序,则可以保留对注入器的引用并获取$rootScope：

var injector = angular.bootstrap(element,["myAppModule",...]);
var $rootScope = injector.get("$rootScope");

在任何情况下都不要忘记在外部事件后调用$apply.