Search code examples
angularionic2angular2-components

No component factory found Error in ionic2 rc0


i am trying to beta11 to rc0 in ionic2.

one of my page has custom tag as peg the changelogs i was trying to update my custom tag and and the page as per the point 7 explained

Import and add each of your custom components and pipes to the declarations array in src/app/app.module.ts.

i have moved my componentTags.ts file to src and take a look at my @NgModel

@NgModule({
  declarations: [
    MyApp,
    LoginPage,
    HomePage,
    AboutUsPage,
    PrivacyPolicyPage,
    TermsOfUsePage,
    ProductSubCategoryPage,
    CategoryProductDetailsPage,
    CategoryProductDetailsInfoPage,

    //custom tags
    QuantityComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage,
    HomePage,
    AboutUsPage,
    PrivacyPolicyPage,
    TermsOfUsePage,
    ProductSubCategoryPage,
    CategoryProductDetailsPage,
    CategoryProductDetailsInfoPage,

    QuantityComponent
  ],
  //directives: [QuantityComponent],
  providers: [
    Products,
    Users,
    Configurator,
    Rest
  ]

so here is my custom component file called quantityTag.ts file

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'counter',
    
    styles: [`

        .quantity-input {
            display:flex; align-items:center;
        }
        .quantity-input .input-width {
            width:50px;
            border: 1px solid #bdbdbd;
            padding-top: 5px;
            
        }
        
        ion-icon{
            margin-left:0px;
            height:20px;
            padding-top: 3px;
            margin-top: 5px;
            color:#64c8dc;
            
        }
        button{
            background-color:SteelBlue;
        margin-left: 0px;
        }
    `],
    
    template: `
        <span class="quantity-input" style="">
            <input type="text" [(ngModel)]="counterValue" class="input-width"/> 
            <button small (click)="submit($event)"><ion-icon name="refresh"></ion-icon></button>
        </span>
    `
})

export class QuantityComponent {
    
    @Input() counterValue = 0;

    @Input() cookie = null;

    @Output() counterChange = new EventEmitter();

    submit(evt){
        this.counterChange.emit({
          value: this.counterValue,
          cookie: this.cookie
        });
    }



}

i am having a page called shopingcart.ts in that i need this custom tag but i am getting error as below

EXCEPTION: Error in ./HomePage class HomePage - inline template:18:27 caused by: No component factory found for ShopingcartPage

ORIGINAL EXCEPTION: No component factory found for ShopingcartPage


Solution

  • Try add your page in @NgModules

    app.module.ts:

    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { AboutPage } from '../pages/about/about';
    import { ContactPage } from '../pages/contact/contact';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';
    import { LoginPage } from '../pages/loginpage/login-page'
    
    @NgModule({
      declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage,
        LoginPage
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage,
        LoginPage
      ],
      providers: []
    })
    export class AppModule {}
    

    https://github.com/angular/angular/issues/11030