Can not use Angular with Power Apps Component Framework (PCF)

[Anonymous]

Hi,

I tried to use Angular in  Power Apps component framework, but I am not able to use it, because I always get an error when I drag & drop the custom component into a canvas app.

I followed this guide: https://medium.com/@gonadn/how-to-use-angular-element-with-powerapps-component-framework-pcf-1486a1b...

I am able to create an Angular Element app (with Angular 7 and 9) and to export it as a solution. Then I have started a lite server, in local, and it works fine (like the author into the guide): the guide ends here!

Then I have imported the solution, successfully, on Power App platform and I am able to see it into the custom component list menu but, every time I try to use it, I can't!

No errors are displayed onto the UI, but if I open the terminal console of the browser I get some errors (see picture): 

Have I made any mistake?

Did any of you ever get Angular (not AngularJs, I mean Angular >= v.7) in PCF to work?

In attachment you will find a solution zip file containing a very basic Angular application (it displays only a string).

Thanks

[v-xida-msft]

Hi @Anonymous ，

Do you export your PCF project as a managed solution or unmanaged solution?

Currently, I could not reproduce your issue on my side. Please consider export your PCF Project as a unmanaged solution, then try it again, check if the issue is fixed.

Please check and see if the following thread would help in your scenario:

https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/Does-PCF-Support-Angular-JS/m-p/364592#M905

Regards,

[Anonymous]

Hi, 

thanks for your support.

I have exported the PCF project as a unmanaged solution and I have the problem (I tried in the past also the managed).

The link you provided talk about Angular JS, I need solutions for Angular with version >= 7

Thanks

[v-xida-msft]

Hi @Anonymous ,

Currently, I have no idea with this issue. Please consider submit an assisted support ticket for further help through the following link:

https://powerapps.microsoft.com/en-us/support/pro

Regards,

[DevPotato]

Hi @Anonymous 

Did you create a support ticket for this and have you received a fix for this problem?

We ran into the same issue as you did but before we create a support ticket ourselves we want to make sure the resolution is already known or not.

Thx in advance!

[Anonymous]

Hi @DevPotato ,

I had not create a support ticket for this.

I was able to find what drove Power Apps to the error.

The Angular app comes with ZoneJs and this one, among its features, patches some promise function, but also Power Apps (with Bluebird I think) needs to patch these functions and this leads to the error.

I tried to remove ZoneJs from my Angular app but I had some position graphical issues, so I tried to deny ZoneJs promise patches.

Into index.ts file I have added these 2 rows:

With this instruction we are disabling the patch on Promises

(window as any).__Zone_disable_ZoneAwarePromise = true;
With this instruction we reset the asserts on the Promise functions, so we will not get any error into the console

(window as any).Zone.assertZonePatched = () => {};

Let me know if this solution is suitable for you.

Cheers,

pakotest

[JasperC]

Hi @Anonymous 

(Posting on my correct account this time - instead of @DevPotato)

Thanks for sharing your fix!

I'm afraid your fix is not sufficient for our solution. Most likely we have another JS Library that uses/changes the Promise function.

Can you tell me how you figured out what library was using/changing the Promise function? Did you go through the entire bundled Angular Element?

I assume that blocking these Promise calls for other library might also causes some breaking functionality? Did this break anything in your Angular Element?

Thx!

[Anonymous]

Hi @JasperC ,

I am afraid to be not useful for this.

Reading the error into the console I went directly on Zone, because it was a talking error.

Replying to your question:

I assume that blocking these Promise calls for other library might also causes some breaking functionality? Did this break anything in your Angular Element?

Yes, it could be possible if you need these Promise calls managed by Angular, it was not my case.

I don't know your Angular app but I could suggest you to minimize the Angular code for the PCF keeping away UI related code and realize graphical component with native Power Apps components.

Then your PCF will emit data (for example writing into some properties) for the native Power Apps UI components.

I hope this could help you.

[JasperC]

Hi @Anonymous 

Sadly we want to use a specific Angular library so the Angular Element looked like our only option. We thinks it's best to start looking to some other solutions rather than stripping down this Angular library - which provides some UI functionality...

Thanks for the help!

[Anonymous]

Hi @JasperC 

do you find some solutions about using Angular component as PCF ?

Thx