Angular2 RC6 nâng cấp

Question

sau khi cập nhật dự án của tôi để RC6 lỗi sau đây xảy ra:

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; 
    } 

} 

Nó mất một thời gian của tôi, nhưng tôi không thể hình dung nó ra.

Answer 1

Directives và pipes phải được xác định trong @NgModule Nếu tôi đọc chính xác. Hỗ trợ bên trong @Component bị xóa.

Vì vậy, yeah chỉ di chuyển chỉ thị của bạn vào NgModule

Tại thời điểm bạn có: Hợp phần A với chỉ thị Ac và Hợp phần B với chỉ thị Bc và nhiều khả năng một AppModule, bạn chỉ cần di chuyển Ac và Bc vào AppModule. Và vâng, bạn phải xóa chúng khỏi khai báo @Component

Các chỉ thị sau đó sẽ có sẵn ngay trong các thành phần được xác định trong mô-đun của bạn.

---

Ví dụ từ OP trở thành:

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 {} 

Xem doc cho router: router documentation

Answer 2

directives và pipes phải được xác định trong các tuyên bố @NgModule của bạn kể từ RC6. Xóa chúng khỏi trang trí @Component của bạn.

Answer 3

Đối với góc 2 phiên bản cuối cùng 2.0.0.0

ống cần được khai báo trong phần khai báo của app.module.ts nộp

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

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


}) 

chỉ quan sát thực hiện keyspipe trong đoạn mã trên.