Updated needed and error on @ViewChild

[thomastthai]

In testing this out in my own app, I found some errors that I was able to correct and one I couldn't.

With Ionic 2.1.0-beta.3, the following changes had to be made:

import { Component, Directive, ViewChild } from '@angular/core';
//import { Shrinkage } from 'ionic-shrinkage';
import * as Shrinkage from 'ionic-shrinkage';

@component({
selector: 'page-home',
templateUrl: 'home.html'
//directives: [ Shrinkage ]
})

@directive({
selector: '[Shrinkage]' // <-- [my-dir] because it's an attribute
})

The only error left is this:

11:09:48] typescript: C:/Users/Thomas/ionic2/app/src/pages/home/home.ts, line: 24

        Argument of type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'
        is not assignable to parameter of type 'string | Function | Type<any>'. Type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'
        is not assignable to type 'Type<any>'. Property 'apply' is missing in type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'.
  L23:  // Necessary for the change() method below
  L24:  @ViewChild(Shrinkage) shrinkage;

[11:09:48] transpile failed

export class HomePage {
  conferenceDate = '2047-05-17';

  // We bind content to the shrinkage attribute in the HTML template
  @ViewChild(Content) content: Content;

  // Necessary for the change() method below
  **@ViewChild(Shrinkage) shrinkage;**// <-- line 24

  constructor(public popoverCtrl: PopoverController) { }

  presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present({ ev: event });
  }

  // If you use Structural Directives to add or remove items in the header,
  // you'll have to call resize() on both content and the shrinkage directive.
  change(e) {
    this.content.resize();
    this.shrinkage.resize();
  }
}

[WhatsThatItsPat]

Thanks for testing things out.

I'm confused by your version number. Is there a 2.1.0-beta.3 of the framework? Is that the CLI?

I created this alongside Beta.11, for which it should work. They've since released RC0 and RC1, neither of which I've tested Shrinkage against. Beta.11 was pre-ngModule, so I'll need to make some updates.

I'm moving my own project over to RC1+, after which I'll work on updating Shrinkage to work with release candidates.

[thomastthai]

Thanks for the work and reply. Here is my system information from ionic info:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0-beta.3
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v4.2.4

Does this make tabs shrink too? Tabs take up a lot of screen real estate too. With the nav tool bar at the top and say tabs at the bottom, as the user scrolls up, the nav tool bar should shrink upward and the tabs at the bottom would shrink downward. They both move back in respectively once the user scrolls down.

[WhatsThatItsPat]

These shouldn't affect Shrinkage, but just to be sure, you should upgrade your Node installation and your Ionic CLI.

The latest Node LTS is v6.9.1.

And from Steps to Upgrade to RC0, you'll want to first uninstall your CLI:

npm uninstall -g ionic

And reinstall the latest:

npm install -g ionic

But the current/Beta.11 Shrinkage is only for headers. I have a plan for tabs and footers, but didn't want to waste too much time before Ionic went final.

[thomastthai]

I updated. I tried your original codes and got the same errors. I then commented them out and put in what got rid of the errors. That last error remains.

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v6.9.1

Here is what home.ts looks like.

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

// Shrinkage
import { Component, Directive, ViewChild } from '@angular/core';
import { PopoverController, Content } from 'ionic-angular';

//import { PopoverController } from 'ionic-angular';
import { PopoverPage } from '../about-popover/about-popover';

//import { Shrinkage } from 'ionic-shrinkage';
import * as Shrinkage from 'ionic-shrinkage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
  //directives: [ Shrinkage ]
})

//
@Directive({
  selector: '[Shrinkage]' // <-- [my-dir] because it's an attribute
}) 
//

export class HomePage {
  conferenceDate = '2047-05-17';

  // We bind content to the shrinkage attribute in the HTML template
  @ViewChild(Content) content: Content;

  // Necessary for the change() method below
  //@ViewChild(Shrinkage) shrinkage: Shrinkage;
  @ViewChild(Shrinkage) shrinkage;

  constructor(public popoverCtrl: PopoverController) { }

  presentPopover(event) {
    let popover = this.popoverCtrl.create(PopoverPage);
    popover.present({ ev: event });
  }

  // Shrinkage: If you use Structural Directives to add or remove items in the header,
  // you'll have to call resize() on both content and the shrinkage directive.
  //
  change(e) {
    this.content.resize();
    this.shrinkage.resize();
  }
  //
}

ionic $ (node:4424) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): Error: write EPIPE
[16:26:30] transpile update started ...
(node:8484) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 6): Error: This socket is closed
[16:26:35] typescript: C:/Users/Thomas/ionic2/app/src/pages/home/home.ts, line: 33
Argument of type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'
is not assignable to parameter of type 'string | Function | Type'. Type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'
is not assignable to type 'Type'. Property 'apply' is missing in type 'typeof "C:/Users/Thomas/ionic2/app/node_modules/ionic-shrinkage/dist/index"'.

[16:26:35] transpile update failed

[WhatsThatItsPat]

I figured that wouldn't fix anything, and that I'd still need to make updates due to the Beta-to-RC jump.

I'll probably get back into this in about 3-4 weeks, but it will be dependent on Ionic's release schedule.

[thomastthai]

Thank you Patrick.

[thomastthai]

I made more progress in correcting the previous errors. Now I have a new one:

[05:59:32] ionic-app-scripts 0.0.36
[05:59:32] watch started ...
[05:59:32] build dev started ...
[05:59:32] clean started ...
[05:59:32] clean finished in 7 ms
[05:59:32] copy started ...
[05:59:32] transpile started ...
[05:59:33] lint started ...
[05:59:37] lint finished in 4.22 s
[05:59:38] transpile finished in 6.72 s
[05:59:38] bundle started ...
[05:59:39] copy finished in 6.90 s
[05:59:46] bundle failed: 'Shrinkage' is not exported by node_modules\ionic-shrinkage\dist\index.js
(imported by src\app\app.module.ts). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
[05:59:47] watch ready in 14.94 s

I found a similar error from Google, but I'm not sure if their approach to fix it is the way to go:

@sosnet the error of does not export InMemoryWebApiModule is because ionic2-rc0 uses rollup to create the bundle instead of webpack, and rollup doesn't support importing commonjs module by default. Even though there is a plugin rollup-plugin-commonjs but it seems with some limitation.

I got same error and have to change tsconfig.json of angular-in-memory-web-api to export module with es2015 in this commit, and use it locally

Is Shrinkage a "commonjs module?"

[WhatsThatItsPat]

Thanks for looking again, but I'd caution you not to waste too much time on this until Ionic goes final. Given their switch from Webpack, to Rollup, and back to Webpack, the build process isn't stable enough for me to commit time to this.

It's still on my todo list as I want this functionality in my own project, but it's probably going to be a whenever-ionic2-goes-final-plus-a-few-weeks kind of thing.

[thomastthai]

Yesterday I updated Ionic 2 to RC3. Now I don't get that error anymore and Ionic would "compile" without errors. I take it is because they went back to Webpack? The issue now is an error in Chrome's console saying the component where I included Shrinkage is not a component resulting in ionic serve failing with a blank screen on Chrome.

[jonoforbes]

@PatrickMcD @thomastthai any update on getting this to work with RC3? I'm still getting

Argument of type 'typeof 
            "/ionic-app/node_modules/ionic-shrinkage/dist/index"' is not 
            assignable to parameter of type 'string | Function | Type<any>'. Type 'typeof 
            "/ionic-app/node_modules/ionic-shrinkage/dist/index"' is not 
            assignable to type 'Type<any>'. Property 'apply' is missing in type 'typeof 
            "/ionic-app/node_modules/ionic-shrinkage/dist/index"'. 

[WhatsThatItsPat]

Sorry, no updates yet. I've been busy on a project and I'll probably wait until Ionic 2.0 goes final anyway. I've seen some upcoming things in their codebase that I can take advantage of, but don't want to spend time until I'm sure it's stable.

[AzSiAz]

Any news for an update ?

[dimitri320]

Any updates on this issue?

@dimitri320 +1 !

[badrshs]

any update please ? ?