Angular2 的自定义渲染器

Question

我正在试验 Angular2 的自定义渲染器。

我已经设置了一个简单的 example project 和一个我想在 Node.js 上运行的最小 Angular2 应用程序 (AppComponent)。我已经实现了一个自定义的DomAdapter 和一个自定义的Renderer（只是一个应该登录到控制台的假人），然后我尝试在一些custom bootstrap code 中将所有内容连接在一起。

目前，我遇到以下错误消息：

Error: No precompiled component AppComponent found
at new BaseException (/home/ralf/git/node-angular-example/node_modules/angular2/src/facade/exceptions.js:15:23)
at Compiler_.compileInHost (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/linker/compiler.js:47:19)
at DynamicComponentLoader_.loadAsRoot (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/linker/dynamic_component_loader.js:101:31)
at di_1.provide.useFactory (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/application_ref.js:29:47)
at Injector._instantiate (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:763:27)
at Injector._instantiateProvider (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:714:25)
at Injector._new (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:703:21)
at InjectorInlineStrategy.getObjByKeyId (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:216:33)
at Injector._getByKeyDefault (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:899:37)
at Injector._getByKey (/home/ralf/git/node-angular-example/node_modules/angular2/src/core/di/injector.js:845:25)

有人可以解释这意味着什么以及缺少什么吗？

更新： 正如 Tobias Bosch 指出的那样，COMPILER_PROVIDERS 不见了。但是，添加它们后，我得到另一个错误：

Error: DI Exception
at NoProviderError.BaseException [as constructor] (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/facade/exceptions.js:15:23)
at NoProviderError.AbstractProviderError [as constructor] (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/exceptions.js:38:16)
at new NoProviderError (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/exceptions.js:74:16)
at Injector._throwOrNull (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:854:19)
at Injector._getByKeyDefault (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:905:21)
at Injector._getByKey (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:845:25)
at Injector._getByDependency (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:831:25)
at Injector._instantiate (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:723:36)
at Injector._instantiateProvider (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:714:25)
at Injector._new (/home/ralf/git/angular2-renderer-example/node_modules/angular2/src/core/di/injector.js:703:21)

你能帮我理解这个吗？如何判断缺少哪个提供商？

更新 2： 结果发现缺少 XHR 的实现。 Adding a shim 解决了这个问题。现在它正在工作。

Answer 1

出现此错误是因为您没有提供COMPILER_PROVIDERS（请参阅我们在浏览器中引导时设置的https://github.com/angular/angular/blob/e1bf3d33f8a1fa05a832b9b7ee1300ef9862fd0b/modules/angular2/platform/browser.ts#L31）。

有关自定义渲染器的示例，请参阅我们的 DebugDomRenderer (https://github.com/angular/angular/blob/e1bf3d33f8a1fa05a832b9b7ee1300ef9862fd0b/modules/angular2/src/core/debug/debug_renderer.ts)。

import {isPresent} from 'angular2/src/facade/lang';
import {
  Renderer,
  RootRenderer,
  RenderComponentType,
  RenderDebugInfo
} from 'angular2/src/core/render/api';
import {
  DebugNode,
  DebugElement,
  EventListener,
  getDebugNode,
  indexDebugNode,
  removeDebugNodeFromIndex
} from 'angular2/src/core/debug/debug_node';

export class DebugDomRootRenderer implements RootRenderer {
  constructor(private _delegate: RootRenderer) {}

  renderComponent(componentProto: RenderComponentType): Renderer {
    return new DebugDomRenderer(this, this._delegate.renderComponent(componentProto));
  }
}

export class DebugDomRenderer implements Renderer {
  constructor(private _rootRenderer: DebugDomRootRenderer, private _delegate: Renderer) {}

  renderComponent(componentType: RenderComponentType): Renderer {
    return this._rootRenderer.renderComponent(componentType);
  }

  selectRootElement(selector: string): any {
    var nativeEl = this._delegate.selectRootElement(selector);
    var debugEl = new DebugElement(nativeEl, null);
    indexDebugNode(debugEl);
    return nativeEl;
  }

  createElement(parentElement: any, name: string): any {
    var nativeEl = this._delegate.createElement(parentElement, name);
    var debugEl = new DebugElement(nativeEl, getDebugNode(parentElement));
    debugEl.name = name;
    indexDebugNode(debugEl);
    return nativeEl;
  }

  createViewRoot(hostElement: any): any { return this._delegate.createViewRoot(hostElement); }

  createTemplateAnchor(parentElement: any): any {
    var comment = this._delegate.createTemplateAnchor(parentElement);
    var debugEl = new DebugNode(comment, getDebugNode(parentElement));
    indexDebugNode(debugEl);
    return comment;
  }

  createText(parentElement: any, value: string): any {
    var text = this._delegate.createText(parentElement, value);
    var debugEl = new DebugNode(text, getDebugNode(parentElement));
    indexDebugNode(debugEl);
    return text;
  }

  projectNodes(parentElement: any, nodes: any[]) {
    var debugParent = getDebugNode(parentElement);
    if (isPresent(debugParent) && debugParent instanceof DebugElement) {
      nodes.forEach((node) => { debugParent.addChild(getDebugNode(node)); });
    }
    return this._delegate.projectNodes(parentElement, nodes);
  }

  attachViewAfter(node: any, viewRootNodes: any[]) {
    var debugNode = getDebugNode(node);
    if (isPresent(debugNode)) {
      var debugParent = debugNode.parent;
      if (viewRootNodes.length > 0 && isPresent(debugParent)) {
        var debugViewRootNodes = [];
        viewRootNodes.forEach((rootNode) => debugViewRootNodes.push(getDebugNode(rootNode)));
        debugParent.insertChildrenAfter(debugNode, debugViewRootNodes);
      }
    }
    return this._delegate.attachViewAfter(node, viewRootNodes);
  }

  detachView(viewRootNodes: any[]) {
    viewRootNodes.forEach((node) => {
      var debugNode = getDebugNode(node);
      if (isPresent(debugNode) && isPresent(debugNode.parent)) {
        debugNode.parent.removeChild(debugNode);
      }
    });
    return this._delegate.detachView(viewRootNodes);
  }

  destroyView(hostElement: any, viewAllNodes: any[]) {
    viewAllNodes.forEach((node) => { removeDebugNodeFromIndex(getDebugNode(node)); });
    return this._delegate.destroyView(hostElement, viewAllNodes);
  }

  listen(renderElement: any, name: string, callback: Function) {
    var debugEl = getDebugNode(renderElement);
    if (isPresent(debugEl)) {
      debugEl.listeners.push(new EventListener(name, callback));
    }
    return this._delegate.listen(renderElement, name, callback);
  }

  listenGlobal(target: string, name: string, callback: Function): Function {
    return this._delegate.listenGlobal(target, name, callback);
  }

  setElementProperty(renderElement: any, propertyName: string, propertyValue: any) {
    var debugEl = getDebugNode(renderElement);
    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
      debugEl.properties.set(propertyName, propertyValue);
    }
    return this._delegate.setElementProperty(renderElement, propertyName, propertyValue);
  }

  setElementAttribute(renderElement: any, attributeName: string, attributeValue: string) {
    var debugEl = getDebugNode(renderElement);
    if (isPresent(debugEl) && debugEl instanceof DebugElement) {
      debugEl.attributes.set(attributeName, attributeValue);
    }
    return this._delegate.setElementAttribute(renderElement, attributeName, attributeValue);
  }

  /**
   * Used only in debug mode to serialize property changes to comment nodes,
   * such as <template> placeholders.
   */
  setBindingDebugInfo(renderElement: any, propertyName: string, propertyValue: string) {
    return this._delegate.setBindingDebugInfo(renderElement, propertyName, propertyValue);
  }

  /**
   * Used only in development mode to set information needed by the DebugNode for this element.
   */
  setElementDebugInfo(renderElement: any, info: RenderDebugInfo) {
    var debugEl = getDebugNode(renderElement);
    debugEl.setDebugInfo(info);
    return this._delegate.setElementDebugInfo(renderElement, info);
  }

  setElementClass(renderElement: any, className: string, isAdd: boolean) {
    return this._delegate.setElementClass(renderElement, className, isAdd);
  }

  setElementStyle(renderElement: any, styleName: string, styleValue: string) {
    return this._delegate.setElementStyle(renderElement, styleName, styleValue);
  }

  invokeElementMethod(renderElement: any, methodName: string, args: any[]) {
    return this._delegate.invokeElementMethod(renderElement, methodName, args);
  }

  setText(renderNode: any, text: string) { return this._delegate.setText(renderNode, text); }
}