Angular2

Question

के लिए कस्टम रेंडरर मैं Angular2 के लिए एक कस्टम रेंडरर के साथ प्रयोग कर रहा हूं।

मैंने न्यूनतम कोणीय 2 एप्लिकेशन (AppComponent) के साथ एक साधारण example project स्थापित किया है जो मैं नोड.जे.एस. पर चलाना चाहता हूं। मैंने एक कस्टम 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) 

किसी व्याख्या कर सकते हैं कि इसका क्या मतलब है और क्या याद आ रही है:

वर्तमान में, मैं निम्न त्रुटि संदेश के साथ फंस कर रहा हूँ?

अद्यतन: के रूप में टोबियास बॉश ने कहा, 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: यह पता चला कि एक्सएचआर का कार्यान्वयन गायब था। Adding a shim इस मुद्दे को हल किया गया। अब यह काम कर रहा है।

Answer 1

यह त्रुटि तब होती है क्योंकि आपने COMPILER_PROVIDERS प्रदान नहीं किया है (https://github.com/angular/angular/blob/e1bf3d33f8a1fa05a832b9b7ee1300ef9862fd0b/modules/angular2/platform/browser.ts#L31 देखें जहां हम ब्राउज़र में बूटस्ट्रैप करते समय इसे सेट करते हैं)।

कस्टम रेंडरर के उदाहरण के लिए, हमारे डीबगडॉम रेंडरर (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); } 
}