Angular 2 error directives

Question

I could use some help over this, I'm learning about ANGULAR 2 routing, I'm getting this error:

app/app.component.ts(7,12): error TS2345: Argument of type '{ selector: string; templateUrl: string; directives: (typeof PeliculasListComponent | typeof Peli...' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'. Types of property 'directives' are incompatible. Type '(typeof PeliculasListComponent | typeof PeliculasFooterComponent | typeof "C:/UwAmp/www/curso-ang...' is not assignable to type '(Type | any[])[]'. Type 'typeof PeliculasListComponent | typeof PeliculasFooterComponent | typeof "C:/UwAmp/www/curso-angu...' is not assignable to type 'Type | any[]'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'Type | any[]'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'any[]'. Property 'length' is missing in type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"'. app/app.component.ts(16,14): error TS2345: Argument of type '({ path: string; name: string; component: typeof PeliculasListComponent; useAsDefault: boolean; }...' is not assignable to parameter of type 'RouteDefinition[]'. Type '{ path: string; name: string; component: typeof PeliculasListComponent; useAsDefault: boolean; } ...' is not assignable to type 'RouteDefinition'. Type '{ path: string; name: string; component: typeof "C:/UwAmp/www/curso-angular/app/components/contac...' is not assignable to type 'RouteDefinition'. Types of property 'component' are incompatible. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'Type | ComponentDefinition'. Type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"' is not assignable to type 'ComponentDefinition'. Property 'type' is missing in type 'typeof "C:/UwAmp/www/curso-angular/app/components/contacto.component"'.

This is my code:

import {Component} from "angular2/core";
import {PeliculasListComponent} from "./components/peliculas-list.component";
import {PeliculasFooterComponent} from "./components/peliculas-footer.component";
import ContactoComponent from "./components/contacto.component";

import {ROUTER_DIRECTIVES, RouteConfig, Router} from "angular2/router";
@Component({
    selector: "my-app",
    templateUrl: "app/views/peliculas.html",
    directives: [PeliculasListComponent,
                 PeliculasFooterComponent,
                 ContactoComponent, 
                 ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path: "/peliculas", name:"Peliculas", component: PeliculasListComponent, useAsDefault: true},
    {path: "/contacto", name:"Contacto", component: ContactoComponent}*/
])

export class AppComponent{
    public titulo:string = "Peliculas con angular" ;

}

Do yoy have any ideas how to solve it? THANKS!!

It looks like you might have upgraded your version of angular 2 and are working on a project written with a beta version. Routing and directives (imports) now belong in the NgModule — Jason Goemaat
@JasonGoemaat just to expand on your point little bit, this app is written in a legacy version that will be very hard to find documentation on and has a likely unknown set of bugs and issues. If you are just starting out please upgrade to the latest as things have changed. If you're maintaining an existing application then gods help you. — Aluan Haddad
I didn't think the process was all that difficult, it may be more difficult if you are just starting with the project and not familiar with how things were done in the beta in the first place. You can look at the NgModule docs and this guide on updating from RC4 to RC5 when they introduced NgModule. Basically create new NgModule and move declarations from components to it and change bootstrapping. — Jason Goemaat

Stefan Rein Stefan Rein · Accepted Answer · 2017-01-26T05:09:30

You are most likely using an outdated version of a release candidate from angular, like mentioned in the comments. Because there is no directives attribute according to the latest documentation in the component decorator:

https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html

Start with the guides from angular.io, there are many examples.

Otherwise start with the angular seed project, where everything is configured:

https://github.com/angular/angular-seed

Try this guide from angular directly, it covers pretty much everything you need for the start:

https://angular.io/docs/ts/latest/guide/router.html

Angular 2 error directives

1 Answers