Angular2的自定义渲染器
我正在尝试使用Angular2的自定义渲染器。
我已经build立了一个简单的示例项目 ，我想在Node.js上运行一个最小的Angular2应用程序（ AppComponent ）。 我已经实现了一个自定义的DomAdapter和一个自定义的渲染器 （只是一个应该login到控制台的虚拟），然后我尝试在一些自定义引导代码中将所有东西连接在一起。
目前，我遇到以下错误消息：
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)
有人可以解释这是什么意思，缺less什么？
更新： 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的实现丢失了。 添加垫片修复了这个问题。 现在它正在工作。
发生此错误的原因是您没有提供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); } }