Angular2 RC6升级 [英] Angular2 RC6 upgrade

问题描述

将我的项目更新为RC6后出现以下错误:

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

}

我花了一段时间，但我想不通.

如果我正确阅读，则必须在@NgModule中定义

解决方案

Directives和pipes. @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 {}

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

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.

解决方案

Directives and pipes must be defined in @NgModule If I'm reading correctly. Support inside @Component is removed.

So yeah just move your directives into the NgModule

At the moment you have : Component A with directives Ac and Component B with directives Bc and most likely one AppModule, you just have to move Ac and Bc into the AppModule. And yes, you have to remove them from the @Component declaration

The directives will then be immediately available in the components that are defined in your module.

---

Example from OP becomes:

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

See the doc for router: router documentation

这篇关于Angular2 RC6升级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！