Ionic CLI 2.2.3 Component bind problem, WHY?

Ionic Framework ionic-v3
1

Heres my info:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.9.0
Xcode version: Xcode 8.3 Build version 8W120l

UPDATE: this was solved … HUGE thanks to @rapropos — when a component is needed in a page … import components via their modules into the pages modules

I am trying to port my project to Ionic 3 …

Regarding the new .module.ts files are created automatically using the latest version of the CLI …

I have a simple component that uses @Input() to receive and set a property

I have tried importing this component into my project at the app.module level, and at the page level

The build --prod process fails:

First i get the error which suggests that the component is declared twice, so i tried removing the .module.ts file

Then the build complains its not there…

So i keep the .module, remove import from app.module and only import into page where needed.

Now with the component imported at the page level, on build --prod … i get the error:

Error: Template parse errors: Can’t bind to ‘progress’ since it isn’t a known property of ‘progressbar’

i have tried importing progressbar.module.ts instead of the progressbar.ts, this does not seem to make a difference

I have tried importing the CommonModule in the progressbar.module file that belongs to my component …

Both throw this error …

Is there ANY documentation anywhere explaining how these new .module files work?

Heres the component… its pretty basic…

WHAT am i doing wrong?? Anyone??

Apologies if i seem frustrated … and i get that the Ionic team is working hard to get lazy loading implemented … but this is such a SIMPLE component — it is NOT clear what we are doing wrong here…


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

@Component({
  selector: 'progressbar',
  templateUrl: 'progressbar.html'
})
export class ProgressbarComponent {

  @Input('progress') progress:number;
  @Input('seconds') seconds:number;
  @Input('config') config:any;

  constructor() {
    // console.log('Hello Progressbar Component');
  }

}

And here is the markup for the page:

<progressbar [progress]="currentPercent" [seconds]="currentSecond" [config]="progressBarConfig"></progressbar>

2

Honest question:
Why are you upgrading if you just want to finish and release your project?

3

Well to that i would just say … what if we had started with Angular JS?

In all seriousness though … in anticipation of Ionic 3 and the changes it introduces … we’d just like to try and stay as current as possible here…

4

Even then I would suggest finishing the app and releasing it. Many people out there are doing exactly that, see all the posts on ionic-v1 here in the forum.

This is the opposite goal of wanting to release something as soon as possible. It’s totally fine if this is your goal, but part of being on the bleeding edge is also being the first to encounter bugs, missing documentation or misunderstandings.

5

May we see the .module.ts files for both the progress bar component and a typical page that includes it?

6

Sure …

progressbar.module.ts

Note i have tried with and without importing IonicModule and CommonModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { ProgressbarComponent } from './progressbar';

@NgModule({
  declarations: [
    ProgressbarComponent,
  ],
  imports: [
    IonicModule,
    CommonModule
  ],
  exports: [
    ProgressbarComponent
  ]
})
export class ProgressbarComponentModule {}

start.module.ts (the page)

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Start } from './start';

@NgModule({
  declarations: [
    Start,
  ],
  imports: [
    IonicPageModule.forChild(Start),
  ],
  exports: [
    Start
  ]
})
export class StartModule {}
7

Add ProgressbarComponentModule to the imports of StartModule.

5 Likes
8

THANK YOU… seriously … THANK you … @rapropos you ROCK

I get it now …

onward and up

… its so clear really now … it was the ERROR message itself that had me digging in the wrong place …

It would be awesome if they can look into refining the error response

1 Like
9

You’ll start to get really used to that sort of error, now that more and more libraries are ditching kitchen sink modules to facilitate dead code removal. “Can’t bind to ‘inputProperty’ since it isn’t a known property of ‘component’” basically means “I haven’t seen the definition of ‘component’ that tells me it has a bindable property ‘inputProperty’”, so an import is missing somewhere.

If your custom component includes, for example:

<ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
<div *ngIf="ruhRoh()">ruh roh, shaggy</div>

You will see similar errors when failing to import IonicModule in your component’s module (for ion-datetime) and CommonModule (for ngIf).

1 Like