Angular integration

[ghost]

Hi, i have one question.. it's possible to easily integrate your library in an Angular 2+ project?

I've try to import has a node_module and it seems to work, but i encountered some problem when Penpal create some promises.

My app never resolve the promise .. is it possible that it's zone.js? I see that promises are wrapped from it

[Aaronius]

Penpal doesn't have any framework-specific code in it, so I assume it should work with Angular, but I haven't used Angular since Angular 1 so I may not be able to offer much guidance. If you wanted to create a very simple demo of your issue using sandbox.io or something like that I may be able to help figure out what's going on.

[cda963]

Tested it with Angular 8 and it works just fine.

[ghost]

Ok I try to explain the use I made of it.

I used Penpal with an Angular 5 version. To include it I followed this guide: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

I worked on the Ionic / Angular app with a page that includes an iframe and inside this iframe there is another site hosted elsewhere that uses Penpal.

I connected to child using your connecToChild API, but when I tried to execute a method within the child, the promise is null and therefore never enters in the then statement.

connection.promise.then (child => { child.navigate.then( ... Where's my mistake?

[Aaronius]

It looks like you're not calling the navigate method; you're only referencing it. child.navigate.then( should be child.navigate().then(.

[ghost]

sorry .. i wrote the wrong code, it's similar of yours, the real code is: child.navigate(somevalue).then( ..

[Aaronius]

That seems like it should work then. I don't think I'll be able to be much help unless you can set up a reproducible example that I can debug.

[ghost]

ok, i will try to implemet a reproducible example on codesandobox.io and then i will write to you back

[ghost]

Hi @Aaronius , i've created this project on codesandbox whitch includes your library: https://codesandbox.io/s/angular-bq5o1 you can look it at this page: https://bq5o1.codesandbox.io/

That includes an external site that used Penpal for exposes a method navigate(), which essentially routes to another page.

When I try to click on the "Go to another page" button I see on the console "Parent: Waiting for handshake" , and then nothing .. where's my mistake?

[Aaronius]

@maxmori, thanks for the demo. The problem is that the iframe is calling connectToParent when it loads and the parent is calling connectToChild only after the user clicks the "Go to Other Page". This part in the Penpal documentation is important:

You need to ensure that connectToChild is called before the iframe has called connectToParent. As shown in the example above, it is safe to set the src or srcdoc property of the iframe and append the iframe to the document before calling connectToChild as long as they are both done in the same JavaScript event loop. Alternatively, you can always append the iframe to the document after calling connectToChild instead of before.

Once you fix that, it should work for you.

[ghost]

Hi, it works! Thanks