upgrade application to Angular2 RC6

Question

i have just updated my application from angular2 RC5 to RC6 and I still got errors at the selectors

this is console

> Unhandled Promise rejection:
> 
> Template parse errors: 'time-filter' is not a known element:
> 1. If 'time-filter' is an Angular component, then verify that it is part of this module.
> 2. If 'time-filter' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message. ("<div> [ERROR
> ->]<time-filter></time-filter>

and this is my component code :

@Component({
    selector: 'time-filter',
    templateUrl: '../app/shared/time-filter/time-filter.html',
    providers: [TimeService]
})

export class TimeFilter implements OnInit
{..}

and that's how i call it

import { Component, NgModule,SchemaMetadata } from '@angular/core';
import {TimeFilter} from '../shared/time-filter/time-filter.component';

@Component({
    template: `<div>
               <time-filter></time-filter>
        </div>
`

})
@NgModule({
        declarations: [TimeFilter]
})

Answer 1

In @Component , add selector and define same component in declarations of @NgModule .

Create AppComponent like this-

import { Component } from '@angular/core';
import { TimeFilter } from '../shared/time-filter/time-filter.component';

@Component({
selector: 'my-app',
template: `<div>
           <time-filter></time-filter>
        </div>
`
})

and then declare both components in AppModule like this-

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, TimeFilter]
    bootstrap: [AppComponent]
})
export class AppModule { }

Also, do not mix @component and @ngmodule in single file. Do define one thing (eg service or component) per file. Refer angular2 style guide

See if this helps.

Answer 2

Also, be aware that in RC6 angular deprecated the directives and pipes from @component (so you should move those to the upper module). you can read more about it here https://github.com/angular/angular/commit/4a740f2