Angular2 RC6

Question

Upgrade

nach meinem Projekt RC6 folgende Fehler Aktualisierung auftritt:

Error: Typescript found the following errors: 
    app.component.ts (12, 3): Argument of type '{ moduleId: string; selector: string; templateUrl: string; styleUrls: string[]; directives: (type...' is not assignable to parameter of type 'ComponentMetadataType'. 
    Object literal may only specify known properties, and 'directives' does not exist in type 'ComponentMetadataType'. 

app.component.ts

import {Component, OnInit} from '@angular/core'; 
import {NavbarComponent} from "./shared/navbar/navbar.component"; 
import {ROUTER_DIRECTIVES} from "@angular/router"; 
import {SidebarComponent} from "./shared/sidebar/sidebar.component"; 
import {FooterComponent} from "./shared/footer/footer.component"; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [NavbarComponent, SidebarComponent, FooterComponent, ROUTER_DIRECTIVES] 
}) 
export class AppComponent implements OnInit { 

    ngOnInit(): any { 
    return undefined; 
    } 

} 

Es ist meine eine Weile dauern, aber ich kann es herausfinden.

Answer 1

Directives und pipes müssen in @NgModule definiert werden, wenn ich richtig lese. Unterstützung innerhalb @Component ist entfernt.

Also ja nur Ihre Richtlinien in NgModule bewegen

Im Moment haben Sie: Komponente A mit Richtlinien Ac und Komponente B mit Richtlinien Bc und höchstwahrscheinlich ein AppModule, müssen Sie nur noch Ac und Bc in die bewegen AppModul. Und ja, Sie müssen sie aus der @Component Deklaration entfernen

Die Direktiven werden dann sofort verfügbar in den Komponenten, die in Ihrem Modul definiert sind.

---

Beispiel von OP wird:

app.component.ts

// imports... 
@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
}) 
export class AppComponent {} 

app.module.ts

// imports... 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    NavbarComponent, 
    SidebarComponent, 
    FooterComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    FormsModule 
    ], 
    providers: [ 
       //MyService, MyOtherService 
      ], 
    entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

Siehe doc für Router: router documentation

Answer 2

directives und pipes müssen in Ihren @NgModule Deklarationen seit RC6 definiert werden. Entfernen Sie sie von Ihrem @Component Dekorateur.

Answer 3

Für Angular 2 Endfassung 2.0.0.0

das Rohr sollte in Deklarationsteil app.module.ts erklärt Datei

import {KeysPipe} from './keys.pipe'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule, HttpModule ], 
    declarations: [ AppComponent, LoginComponent,ArticleComponent,**KeysPipe** ], 
    bootstrap: [ AppComponent, LoginComponent,ArticleComponent ], 


}) 

nur keyspipe Implementierung in über Code-Schnipsel beobachten.