Angular - 动态组件 - 编译器问题 - 内存泄漏？

Question

我正在尝试创建一个动态组件。 Here是plunker中的样本。 http://embed.plnkr.co/EVFglgkp24hkRkpxrEGe/一切正常，但存在内存泄漏。

Here是github票https://github.com/angular/angular/issues/19997

动态创建的组件将被销毁，但创建动态组件的组件不会被销毁。换句话说，编译动态组件的组件不会被破坏。

在上面的示例中，如果我们在“主页”和“动态页面”之间来回导航，并在 chrome 中拍摄内存快照，您可以看到应该被销毁的组件仍然存在，如下所示。

出于测试目的，我什至尝试注释以下行，但问题仍然存在。

      let injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
      let ngMdlRef = ngMdlFac.create(injector);
      let cmpFactory = ngMdlRef.componentFactoryResolver.resolveComponentFactory(DynamicHtmlComponent);
      this.cmpRef = this.vcRef.createComponent(cmpFactory);

打电话的那一刻

this.compiler.compileModuleAsync

创建者组件根本没有被破坏。在此之前没有任何问题。

请有人帮忙解决这个问题吗？预先感谢您。

Answer 1

你是对的，内存泄漏的问题是由手动模块编译和实例化引起的。如果您查看 MyCreatorComponent 的保留器，您可以看到函数 DynamicHtmlComponent 和 DynamicModule 保存对父 MyCreatorComponent 的引用 通过上下文发挥作用。

这些是距 GC root 距离最短的对象，因此它们很可能是造成内存泄漏的对象。问题是为什么它们不被删除？答案是 Angular 大量缓存了它创建的所有内容，并且在您的情况下也会发生这种情况。通过快速查看，我发现至少有两个保留引用的缓存。

第一

export class JitCompiler {
  private _compiledHostTemplateCache = new Map<Type, CompiledTemplate>();

当您调用 this.compiler.compileModuleAsync(DynamicModule) 时，Angular 会将带有 DynamicHtmlComponent 键的 CompiledTemplate 添加到此缓存中，并且永远不会清除它。

第二个

const _tokenKeyCache = new Map<any, string>();

当您调用 var ngMdlRef = ngMdlFac.create(...) 时，Angular 会将 DynamicHtmlComponentFactory 添加到此缓存中，并且永远不会删除它。

请注意，这些缓存是 Map，而不是 WeakMap，因此只要没有显式调用 .delete()，对象就会被保留。