8

after updating my project to RC6 following errors occurs:

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

}

It take my a while, but I cant figure it out.

4

3 回答 3

17

Directives并且pipes必须在@NgModule如果我没有正确阅读中定义。内部支撑@Component被移除。

所以是的，只需将你的指令移动到 NgModule

目前你有：带有指令 Ac 的组件 A 和带有指令 Bc 的组件 B 并且很可能是一个 AppModule，您只需将 Ac 和 Bc 移动到 AppModule 中。是的，您必须从@Component声明中删除它们

然后，这些指令将立即在模块中定义的组件中可用。

来自 OP 的示例变为：

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

请参阅路由器文档：路由器文档

于 2016-09-02T12:44:36.593 回答
5

directives并且pipes必须在@NgModuleRC6 之后的声明中定义。将它们从您的@Component装饰器中移除。

于 2016-09-02T12:45:23.033 回答
2

对于 Angular 2 最终版本 2.0.0.0

管道应在 app.module.ts 文件的声明部分中声明

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

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


})

只需观察上述代码片段中的键管实现即可。

于 2016-09-18T01:19:08.937 回答