Angular2 RC6 upgrade

Question

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.

Ced · Accepted Answer · 2016-09-15T02:07:33.547

17

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

edited Sep 15 '16 at 02:07

answered Sep 02 '16 at 12:44

Ced

15,847
14
87
146

Is that mean that I have to remove directives from all components and move it to app module or I have to change module for every single component? – ulou Sep 02 '16 at 12:49
You can move everything to app.module first. Later you can reorganize your app to separate components/pipes into different modules – Harry Ninh Sep 02 '16 at 12:59
Correct, this thing have been mentioned in change log – Pankaj Parkar Sep 02 '16 at 13:09
@ulou 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 :). Edited my annswer, you might want to accept it if it helped, thanks. – Ced Sep 02 '16 at 13:25
Please provide an example of how this should look like! – mahatmanich Sep 14 '16 at 08:05

score 5 · Answer 2 · answered Sep 02 '16 at 12:45

5

directives and pipes have to be defined in your @NgModule declarations since RC6. Remove them from your @Component decorator.

answered Sep 02 '16 at 12:45

j2L4e

6,914
34
40

Is that mean that I have to remove directives from all components and move it to app module or I have to create module for every single component? – ulou Sep 02 '16 at 12:57
3

yep, they go into the `declarations` section of your `@NgModule` now. Iif you only have the main app module it goes there. – j2L4e Sep 02 '16 at 12:58
Ok, but If I have more than 1 component, is that mean I have to create module for component A and B or just import directives to component A and somehow link it in component B? – ulou Sep 02 '16 at 13:02
you put it in the module declaration and it just works anywhere in the module – j2L4e Sep 02 '16 at 13:02
Makes alot of sense to me. Always wondered why this wasn't there since the start. – sandrooco Sep 02 '16 at 13:07
@Sandrooco Encapsulation maybe ? Idk – Ced Sep 02 '16 at 13:29

score 2 · Answer 3 · answered Sep 18 '16 at 01:19

For Angular 2 final version 2.0.0.0

the pipe should be declared in declaration section of app.module.ts file

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

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


})

just observe keyspipe implementation in above code snippets.

Angular2 RC6 upgrade

3 Answers3

Linked