"angular2/core" Issue - Unable to get this working in a number of ways

[rrcoolp]

Hi @TheOriginalJosh,

Great plugin, which works fine with static content on Angular2 - however I have not been successful in making it work on the latest angular2/core import..

Could you please have a look with the following setup:

test.ts:

import {Component, ElementRef, OnInit, ViewChild} from 'angular2/core';
import {registerElement} from "nativescript-angular/element-registry";
import {GO_API} from "../../shared/go_services/api";  // <---- I get my images through this service which works fine as tested in a standard Stack Layout

registerElement("Slide", () => require("nativescript-slides").Slide);
registerElement("SlideContainer", () => require("nativescript-slides").SlideContainer);

@Component({
    selector: 'slidedemo',
    template: `
    <SlideContainer angular="true" #slides>
        <Slide *ngFor="#img of images">
            <Image [src]="img.ExtraLarge"></Image>
        </Slide>
    </SlideContainer>
    `
})
export class SlideDemoComponent implements OnInit {

    public images: Array<any> = [];

    @ViewChild("slides") slides: ElementRef;
    constructor(private _GO_API: GO_API) {

    }
    ngOnInit() {
        this.getImages();
    }

    getImages() {
        let params = {
            product_id: 19383
        };

        this._GO_API.call_api("ProductInfoMulti", params)
            .subscribe((data) => {
                if (data && data.ProductInfo && data.ProductInfo.Media) {
                    this.images = data.ProductInfo.Media;


                    // Uncomment below if you want to test images with your own subscriber service
                    // this.images.push({
                    //  ExtraLarge : 'http://teststatic.golfonline.co.uk/media/img/tfi_2135_1_th.300x350.jpg'
                    // });                                          
                    // this.images.push({
                    //  ExtraLarge : 'http://teststatic.golfonline.co.uk/media/img/tfi_2135_1_ex2.300x350.jpg'
                    // });                      

                }
            },
            (error) => {
                console.dump(error);
            }
            );
    }

    ngAfterViewInit() {
        let SlidesXml = this.slides.nativeElement;
        SlidesXml.constructView();
    }
}

Here's my package.json

{
  "name": "test",
  "version": "1.0.0",
  "license": "test",
  "nativescript": {
    "id": "org.nativescript.test",
    "tns-ios": {
      "version": "2.0.1"
    },
    "tns-android": {
      "version": "2.0.0"
    }
  },
  "dependencies": {
    "angular2": "2.0.0-beta.17",
    "email-validator": "^1.0.4",
    "nativescript-angular": "0.0.45",
    "nativescript-cache": "^1.0.0",
    "nativescript-social-share": "^1.1.3",
    "nativescript-swiss-army-knife": "^0.1.1",
    "nativescript-telerik-ui": "^1.1.1",
    "tns-core-modules": "2.0.0"
  },
  "devDependencies": {
    "babel-traverse": "6.9.0",
    "babel-types": "6.9.1",
    "babylon": "6.8.1",
    "filewalker": "0.1.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  }
}

[JoshDSommer]

@rrcoolp I'm glad you like it! Sorry though you've been having problems, Although I actually have been having problems myself, Are you getting an error with the message TypeError: Cannot read property 'panel' of undefined ?

@leocaseiro I had tried your example last night and kept getting this message even though i was registering slides.

I'm wondering if any of the latest updates may have broke this?

[leocaseiro]

@rrcoolp, have you tried update angular to @angular/core?

[leocaseiro]

Hi @TheOriginalJosh, I'm sorry, I didn't see this error. It works fine for me with my example...

Make sure you start add an empty array, is that it? That's the error I get normally with empty arrays.

[JoshDSommer]

@leocaseiro I think for some reason the property of angular="true" wasn't preventing the plugin from constructing correctly and waiting for it to be called in ngAfterViewInit in my testing last night. could you do me a favor and tell me which version of the plugin your using with ng2? That might help track down where the problem is, I won't be able to get back to it until tonight unfortunately thought.

[rrcoolp]

@leocaseiro , Yes I have just manage to upgrade to RC1 - and still no luck. When I remove angular="true" - I get the following error: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'className' of undefined

So am not sure what's the problem.

[leocaseiro]

Hi @TheOriginalJosh,
Sorry for my delay.

I actually tried again and I'm having exactly the same issue that @rrcoolp. It looks like they are on on top of each. Similar what happened in HTML when we have images all with position absolute and different z-index:

I tested with 1.5.3 and 1.5.4 which was working before...

I'll try investigate later and I'll let you know.

[JoshDSommer]

@leocaseiro very strange, no rush man I've got a bunch of other things on my place myself. So it's not working now but was previously?

[leocaseiro]

Hi @TheOriginalJosh, Yeap! The day I posted the angular example it was working.
I also had many changes in my app, so I'm not sure if another pack is causing the same issue.
I'm focused on something else atm, and I'll investigate it later...

[leocaseiro]

Hi @TheOriginalJosh, I've been trying to debug this in deep. I've switched from Slide to StackLayout and I can reproduce the same error. It seems the error is something with the Slide Container, or, perhaps, the gesture is not working.

I loaded 35 images, and I could see they are load one on top of other on Android as well as iOS.

[rrcoolp]

HI @leocaseiro/@TheOriginalJosh,

The slider works fine when the slides are preset (i.e. when not bound/subscribed to a Service request) - must be an angular rc 1 issue perhaps....Anyway I have migrated from BETA 17 to RC 1 now - so will await a lot of updates for all my plugins before things start working across the app...

Good job guys. This a top feature which I am sure a lot of peops will be using once fixed....

Thanks.

[JoshDSommer]

@rrcoolp so it was working in Beta 17 but not RC1?

[rrcoolp]

@TheOriginalJosh - I don't think so as I posted this issue when my project was on Beta17 - and I thought it would fix the issue as per leocaseiro advise to try on RC1...So I have been busy updating my project to RC1....So all in all - it has never really worked for me when I attach the slides to a Subscribed service - e.g. images array is updated from a webservice after ngInit....

<SlideContainer #slides pageIndicators="true" indicatorsColor="#000" angular="true">
    <Slide *ngFor="let item of images">
        <Image [src]="item.ExtraLarge"></Image>
    </Slide>
</SlideContainer>

[JoshDSommer]

@rrcoolp ah ok, that makes sense. The next major release of NativeScript is next week and with it I believe RC2(I need to double check that) after that happens I'm going to give the slides some much-needed attention.

[leocaseiro]

Guess what! I realised why it was working before and why it's not anymore.

Actually, it's working fine. But only in my "child router". So if I test it on my homepage(main view), it doesn't work. However, If I implement a parent page(view) and use the Angular Router to navigate to the child page(view), works fine.

Tested with 1.5.4 and 1.7.0 as well.

I'm not sure what's different from the homepage with {N} from the navigated page. Perhaps something different in the xml, like: <Page> or straight to <SlideContainer>.

Check it working here:

[JoshDSommer]

@leocaseiro that's really strange, I've had some other weird behavior with the previous router. hopefully the new router will solve those and be more consistent.

[timricker]

I dug into this a little more and discovered that when the contructView method is called from ngAfterViewInit(), the AbsoluteLayout.loadedEvent is not firing when the slides plugin is used on the root view/route. So this means the plugin is never initialised properly.

I was able to create a fix, using the following:

public constructView(constructor: boolean = false): void {

    if (this.angular === true && constructor === true) {
        // do nothing 
        return;
    } else if (this.angular === true && constructor === false) {
        this.onLayoutLoaded();
        return;
    }
    this.on(AbsoluteLayout.loadedEvent, (data: any) => {
        this.onLayoutLoaded(); 
    });
}

I moved all of the code that was previously inside the loadedEvent function into a common onLayoutLoad function. Haven't tested this out for all other scenarios (ie angular=false, when used on child routes etc).