Directive PlayerPage has no selector, please add it!


#1

Hi I am using ionic 3 and get the error “Directive PlayerPage has no selector, please add it!”

Pages->player->player.ts:

import {Component, Directive} from '@angular/core';
import { IonicPage,NavController, NavParams } from 'ionic-angular';
import {ImControls} from '../../components/im-controls/im-controls.component';
import {PlayerProvider} from '../../providers/player-provider';

 /**
 * Generated class for the Player page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */


@Directive([ImControls])
@IonicPage()
@Component({
            selector: 'page-player',
            templateUrl: 'player.html',
})
export class PlayerPage {
isPlaylist:Boolean;  
name:any;
constructor(public player:PlayerProvider, public navCtrl: NavController, public navParams: NavParams) { }

ionViewWillEnter() { 
      this.getFileName();
         } 

getFileName() {
 this.player.getFileName()
.then(name => {
 this.name = name;
});    

 }  
 ionViewDidLoad() {
console.log('ionViewDidLoad Player');
}

}

Pages->player->player.html:

   <ion-header>
    <ion-navbar dark>
    <button menuToggle><ion-icon name="menu"></ion-icon></button>
    <ion-title>
        Player
    </ion-title>
</ion-navbar>
<ion-content class="im-controls">
<ion-card>
    <img src="img/back.jpg"/>
    <ion-card-content>
        <ion-card-title *ngIf="name">
            {{name}}
        </ion-card-title>
        <ion-card-title *ngIf="!name">
            Select a File to Play
        </ion-card-title>
    </ion-card-content>
</ion-card>
    </ion-content>

    <im-controls *ngIf="name" [isPlaylist]="isPlaylist" (next)="getFileName()" (back)="getFileName()"></im-controls>

Pages->player->player.module.ts:

import { ImControls } from '../../components/im-controls/im-controls.component';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PlayerPage } from './player';

 @NgModule({
declarations: [
PlayerPage,
],
imports: [
IonicPageModule.forChild(PlayerPage),
ImControls
],
exports: [
PlayerPage,
]
})
export class PlayerModule {}

#2

It doesn’t look like you really want to be creating a directive, so get rid of the @Directive() decorator. If you want to continue using lazy loading, you will need to create another module that declares and exports ImControls, and import it in PlayerModule. A much simpler alternative is to get rid of all the lazy loading stuff - take @IonicPage off of PlayerPage, and include both it and ImControls in the app module.