Whenever i am trying to make ionic3 production build it comes up with “custom component error”


#1

I am using ionic3 and wanted to make a production build, I also create a custom component by using the command line.

But whenever I am going to make a build it comes up with the custom component error I also attached an image and paste in blockquote of the error which I got.

[14:34:18] ngc started …
[14:34:25] typescript error
Can’t bind to ‘control’ since it isn’t a known property of ‘control-messages’. 1. If ‘control-messages’ is an Angular component and it has ‘control’ input, then verify that it is part of this module. 2. If
‘control-messages’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the
@NgModule.schemas’ of this
component to suppress this message. 3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the
@NgModule.schemas’ of this component. ("


<control-messages [ERROR ->][control]=“userForm.controls.fname”> <ion-item
class=“input-item-dd” no-l")

Here is my StackOverflow question link:

If someone can help me it will really be appreciated.
Kind Regards
HAMZA IDREES


#2

Hello,
when you want to use your componet, then you must import it.

import {blaComponent} from ‘…’; is a reference that point to whatever you want make reachable.

Also you need an import to your NgModule in the imports section.

@NgModule({

imports: [
bja,

Depending How you will organize your imports you can do it in
app.module.ts for eager loading,
in each *whatever.module.ts for lazy loading,
or in component.module.ts

Best regards, anna-liebt


#3

Hello @anna_liebt

Really appreciated for your response but I need you to know that i already imported that component in module.ts please take a look at the attached image.
Kind Regards


#4

Can you share the TS file of your ControlMessageComponent… (till the constructor() would be enough)


#5

Here is my Component.ts file

import { Component, Input } from '@angular/core';
import {  FormControl } from '@angular/forms';
import { ValidationService } from '../../providers/services/validation-service';

/**
 * Generated class for the ControlMessagesComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessagesComponent {
  @Input() control: FormControl;
  constructor() {}
  get errorMessage() {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

and Here is my App.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { BundlesAssortedPage } from '../pages/bundles-assorted/bundles-assorted';
import { AllCategoriesPage } from '../pages/all-categories/all-categories';
import { MyCartPage } from '../pages/my-cart/my-cart';
import { CheckoutPage } from '../pages/checkout/checkout';
import { CategoryDetailPage } from '../pages/category-detail/category-detail';
import { MyAddressesPage } from '../pages/my-addresses/my-addresses';
import { AddRemovePopoverPage } from '../pages/add-remove-popover/add-remove-popover';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { ReOrderDetailsPage } from '../pages/re-order-details/re-order-details';
import { OurLocationPage } from '../pages/our-location/our-location';
import { MyFavouritesPage } from '../pages/my-favourites/my-favourites';
import { SignupPage } from '../pages/signup/signup';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ServicesProvider } from '../providers/services/services';
import { LoginPage } from '../pages/login/login';
import { ProductWizardPage } from '../pages/product-wizard/product-wizard';
import { ForgotPasswordPage } from '../pages/forgot-password/forgot-password';
import { AccountVerificationPage } from '../pages/account-verification/account-verification';
import { NetworkProvider } from '../providers/network/network';
import { Network } from '@ionic-native/network';
import { ProductDetailsPage } from '../pages/product-details/product-details';
import { AddAddressPage } from '../pages/modal/add-address/add-address';
import { GlobalStringsProvider } from '../providers/global-strings/global-strings';
import { OrderReviewPage } from '../pages/order-review/order-review';
import { OrderThankyouPage } from '../pages/order-thankyou/order-thankyou';
import { ValidationService } from '../providers/services/validation-service';
import { ControlMessagesComponent } from '../components/control-messages/control-messages';
import { ionicComponents } from '../providers/ionic-components/ionic-components';
import { DesignPizzaPage } from '../pages/design-pizza/design-pizza';
import {  Connectivity } from '../providers/connectivity-service/connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';
import { StoreInfoModalPage } from '../pages/store-info-modal/store-info-modal';
import { AccountSettingsPage } from '../pages/account-settings/account-settings';
import { ComboDetailsPage } from '../pages/combo-details/combo-details';
import { PhoneVerificationPage, FormatTimePipe } from '../pages/phone-verification/phone-verification';
import { MainProvider } from '../providers/main/main';





@NgModule({
  declarations: [
    MyApp,
    // ControlMessagesComponent,
    // HomePage,
    // BundlesAssortedPage,
    // ComboDetailsPage,
    // StoreInfoModalPage,
    // AllCategoriesPage,
    // ProductWizardPage,
    // CategoryDetailPage,
    // ProductDetailsPage,
    // MyCartPage,
    // DesignPizzaPage,
    // CheckoutPage,
    // OrderReviewPage,
    // OrderThankyouPage,
    // AddAddressPage,
    // MyAddressesPage,
    // AddRemovePopoverPage,
    // OrderHistoryPage,
    // ReOrderDetailsPage,
    // OurLocationPage,
    // MyFavouritesPage,
    // AccountSettingsPage,
    // LoginPage,
    // SignupPage,
    // PhoneVerificationPage,
    // FormatTimePipe,
    // ForgotPasswordPage,
    // AccountVerificationPage
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // HomePage,
    // BundlesAssortedPage,
    // ComboDetailsPage,
    // StoreInfoModalPage,
    // AllCategoriesPage,
    // ProductWizardPage,
    // CategoryDetailPage,
    // ProductDetailsPage,
    // MyCartPage,
    // DesignPizzaPage,
    // CheckoutPage,
    // OrderReviewPage,
    // OrderThankyouPage,
    // AddAddressPage,
    // AddRemovePopoverPage,
    // MyAddressesPage,
    // AddRemovePopoverPage,
    // OrderHistoryPage,
    // ReOrderDetailsPage,
    // OurLocationPage,
    // MyFavouritesPage,
    // AccountSettingsPage,
    // LoginPage,
    // SignupPage,
    // PhoneVerificationPage,
    // ForgotPasswordPage,
    // AccountVerificationPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ValidationService,
    ionicComponents,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ServicesProvider,
    Network,
    NetworkProvider,
    GlobalStringsProvider,
    Connectivity,
    Geolocation,
    MainProvider
    
  ]
})
export class AppModule {}


#6

Here’s the error. You’re declaring your Input to the ‘control’ value (of the component) wrong.

You probably are using something like this in the HTML template (page):
<control-messages [control]="blablaControlToComp"> </control-messages> ?

Every ‘property’ you try to input to a component you have to declare it with a Input() decorator with a “keyword”.

Try this:
@Input("control") control: FormControl;


#7

I tried this one but still got same error

`import { Component, Input } from ‘@angular/core’;
import { FormControl } from ‘@angular/forms’;
import { ValidationService } from ‘…/…/providers/services/validation-service’;

@Component({
selector: ‘control-messages’,
template: <div *ngIf="errorMessage !== null">{{errorMessage}}</div>
})
export class ControlMessagesComponent {
@Input(“control”) control: FormControl;
constructor() {}
get errorMessage() {
for (let propertyName in this.control.errors) {
if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
}
}

return null;

}
}
`


#8

Ehmmm, why are you using the ‘get’ getter for your function? Would ditch that.
Not sure if you can but I wouldn’t set a getter for the component class (please correct me if I’m wrong)

try:

errorMessage() {  
...

#9

Hello,

it’s late so maybe I didn’t see it right.

You have in app.module.ts your import marked with a red rectange. Looks Okay. If you use vs or similar there a extension that mark wrong paths for you.This reference to your File.
So your failure says: Your Component is not part of Import Section in @ngModule

If you look to your Imports array in @ngmodule you see
imports: [
BrowserModule,
ReactiveFormsModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
If you want your component eager loaded then you need add here your Component like

imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
ControlMessagesComponent 
  ],

If you are using lazy loading you must do import{ControlMessagesComponent… and Imports[ControlMessagesComponent… to the components.ts file or related whatever.component.ts file.

Maybe this helps.

Best regards, anna-liebt


#10

See: