Fehler beim Analysieren von Vorlagen beim Versuch, eine neue Komponente/Anweisung in angular2-webpack zu erstellen?

Question

ich dies mit: https://github.com/AngularClass/angular2-webpack-starter In dieser Datei src/app/home/home.component.ts, ich ändern Sie es mit einem neuen "fancy-Button" Richtlinie und sind es etwa so:

@Component({ 
    selector: 'fancy-button', 
    template: `<button>clickme</button>` 
}) 
export class FancyButton {} 

@Component({ 
    // The selector is what angular internally uses 
    // for `document.querySelectorAll(selector)` in our index.html 
    // where, in this case, selector is the string 'home' 
    selector: 'home', // <home></home> 
    // We need to tell Angular's Dependency Injection which providers are in our app. 
    providers: [ 
    Title 
    ], 
    // Our list of styles in our component. We may add more to compose many styles together 
    styleUrls: [ './home.component.css' ], 
    // Every Angular template is first compiled by the browser before Angular runs it's compiler 
    templateUrl: './home.component.html', 
    directives: [FancyButton], 
}) 

Und dann in der Vorlage: src/app/home/home.component.html

ich hinzugefügt:

<fancy-button></fancy-button> 

ich die Fehlermeldung main.browser.ts:25Error: Template parse errors:(…)

erhalten 0.123.

Wenn ich aus der home.component.html entfernen, gibt es keine Beschwerden. Wie komme ich hier zurecht? Ich bekomme wirklich nicht, warum dies beschweren ...

Answer 1

Sie haben folgendes zu tun:

import { HomeComponent, FancyButton } from './home.component'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ HomeComponent, FancyButton ], <== add this 
    bootstrap: [ HomeComponent ] 
}) 
export class AppModule { } 

• https://angular.io/docs/ts/latest/guide/ngmodule.html

Auch wenn Sie auf (…) klicken dann die volle Fehlermeldung wird angezeigt