Angular 2. @Input since it isn't a known property of

Question

I got a parent component with following template:

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

And then application try to show it tell me: Unhandled Promise rejection:

Template parse errors:

Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.
1. If 'blocks-banners-slideshow' is an Angular component and it has 'config_private' input, then verify that it is part of this module.
2. If 'blocks-banners-slideshow' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

A child component text:

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_public: any;
  @Input() slideOptions = {};

 ....
}

How to fix it?

Answer 1

I want to expand on Alexander Zakusilo answer a little bit because I think that what he said was my issue, but it didn't immediately click for me...

A great stack overflow post about lazy loading with Ionic 3 that has some included links to docs...

Let's say that you have a bunch of components grouped up in a component module.

const components = [
  GraphLineComponent,
  GraphDateRangeTabsComponent,
  GraphBarComponent,
];

@NgModule({
    declarations: [
    ...components,
  ],
  imports: [IonicModule],
    exports: [
    ...components,
  ]
})
export class ComponentsModule {}

And you want to use one of those components in an ionic page that you are lazy loading... You need to import your components module into the page module where you want to use the component.

@NgModule({
  declarations: [
    GraphPage,
  ],
  imports: [
    IonicPageModule.forChild(GraphPage),
    ComponentsModule,
  ],
})
export class GraphPageModule {}

My issue was that I was importing my components module into my bootstrapped app module and expecting it to work. And if you aren't lazy loading, it will, because everything will exist in the app module.

Answer 2

For me, this error occured because I wrote

@Input

instead of

@Input()

before the property.

Answer 3

Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.

Means it can't find config_private so there are 3 ways to go about fixing this

1. Add the missing property to the component
2. In the component, change the property from config_public to config_private
3. In the .html change the bound property from config_private to config_public

First Option - Add the missing property to the component

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_public: any;
  @Input() config_private: any; // <--- Add this
  @Input() slideOptions = {};

 ....
}

Second option - In the component, change the property from config_public to config_private

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

Since I don't see a [config_public]="..." property being bound try changing config_public to config_private in your component

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон
})

export class BannersBlocksSlideShow extends AbstractBlock{
  list: Array<BannerItem>;
  mySlideOptions: any;

  //Входящие данные
  @Input() config: any;
  @Input() config_private: any; // <--- Change this
  @Input() slideOptions = {};

 ........
}

Third Option - In the .html change the bound property from config_private to config_public

Try changing the bound property to config_public

<ion-content>
  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_public]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>
  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_public]="{ url: 'url'}"></blocks-catalog-category>
  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_public]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts>
</ion-content>

Update

Make sure component is declared in the apps module

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { BannersBlocksSlideShow } from './banners-blocks-slideShow/banners-blocks-slideShow.component';


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

Answer 4

If you are using Ionic 2 with lazy loading then you may be forgot to include the declaration of your block in page module. In this case the error will be the same.