Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

upgrade application to Angular2 RC6

Tags:

angular

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]
})
like image 576
Mohamed Fouad Avatar asked Feb 06 '23 05:02

Mohamed Fouad


1 Answers

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 (e.g. service or component) per file. Refer angular2 style guide

See if this helps.

like image 160
Sanket Avatar answered Feb 13 '23 05:02

Sanket