Trình kết xuất tùy chỉnh cho Angular2

Question

Tôi đang thử nghiệm với trình kết xuất tùy chỉnh cho Angular2.

Tôi đã thiết lập đơn giản example project với ứng dụng Angular2 tối thiểu (AppComponent) mà tôi muốn chạy trên Node.js. Tôi đã triển khai một tuỳ chỉnh DomAdapter và một tuỳ chỉnh Renderer (chỉ là một giả nên đăng nhập vào bảng điều khiển), sau đó tôi cố gắng nối mọi thứ lại với nhau trong một số custom bootstrap code.

Hiện nay, tôi đang mắc kẹt với các thông báo lỗi sau:

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) 

ai đó có thể giải thích điều này có nghĩa và những gì còn thiếu?

Cập nhật: Như Tobias Bosch đã chỉ ra, thiếu COMPILER_PROVIDERS. Tuy nhiên, sau khi thêm chúng tôi nhận được một lỗi khác:

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) 

Bạn có thể giúp tôi hiểu điều này không? Làm cách nào tôi có thể biết nhà cung cấp nào bị thiếu?

Cập nhật 2: Đã chỉ ra rằng việc triển khai XHR bị thiếu. Adding a shim đã khắc phục sự cố. Bây giờ nó hoạt động.

Answer 1

lỗi này xảy ra do bạn không cung cấp COMPILER_PROVIDERS (xem https://github.com/angular/angular/blob/e1bf3d33f8a1fa05a832b9b7ee1300ef9862fd0b/modules/angular2/platform/browser.ts#L31 nơi chúng tôi đặt nó khi khởi động trong trình duyệt).

Để biết ví dụ về trình kết xuất tùy chỉnh, hãy xem DebugDomRenderer của chúng tôi (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); } 
}