cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Regular Visitor

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

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): 

 

errorUsingCustomComponent.png

 

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

10 REPLIES 10
Community Support
Community Support

Hi @pakotest ,

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#M9...

 

Regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

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

 

Hi @pakotest ,

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,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @pakotest 

 

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!

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

Hi @pakotest 

 

(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!

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.

 

 

Hi @pakotest 

 

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!

Hi @JasperC 

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

Thx

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (12,844)