angular 9 with amplify authenticator UI

[alexAlchemy]

Describe the bug I recently upgraded to angular 9 and after a previous issue with amplify and angular deactivated ivy. (I mention this for context in case somebody suggests I opt-out).

I tried using the amplify authenticator component and it won't render. Looking at the error and debugging in the console it seems to be failing here.

componentHost is undefined.

Not sure if I'm missing something obvious or if this is an angular 9 issue.

To Reproduce I set up a minimal repro from using ng new and then going through the aws amplify angular instructions on the main site.

I've added the repro to github

https://github.com/alexAlchemy/aws-amplify-angular-min-repro

Thanks Alex

[pabloFuente]

Same exact error here. I've updated to Angular 9, deactivated Ivy and component will fail here because componentHost is undefined

[promobulls]

Same error, can anyone help?

[SteeveGL]

I tried to investigate. I did not found why componentHost do not get the DynamicComponentDirective value.

I think it's because Angular 9 change the way Views work and that make Amplify Authenticate incompatible.

For my side, I will rollback to Angular 8 for now.

[muchrm]

i try to add {static: true} in complied code in node_module it work, but it's should to migrate this library to angular > 8?

[bostondevin]

Broken for me as well with Angular 9 - it does remove the need for the {static: false} parameter in ViewChild's, so that's probably why it's not working yet - amplify needs to put out a release soon so we can use 9

[cjardine]

@sammartinez Any progress on Angular support, both for v. 9 and Ivy?

[sammartinez]

@cjardine We have been working on a newer implementation of our UI Components as based on this RFC. This is currently in Preview and we are looking for feedback from the community on this. Please let us know what you think! I did test Angular 9 with this preview and it does work but was unable to test Ivy due to time constrains, if you have time to test and provide feedback it would be much appreciated !

[cjardine]

@sammartinez Appreciate the response, and I am eager to have this when it's ready. Unfortunately, I am not able to put the preview in as a test in our main application due to time, risk and testing constraints, but if I can and I find some time, I'll try it out on something less critical. What would be the best way to be informed of this release?

[wickstargazer]

Hi, I think it is linked with this issue #4681 Also linked with this PR #4963

@steevegldev you are correct! so I implemented the dynamicComponent to be event driven, I found out that is occuring mostly because of the ng-if inside the component html and the viewcontainerref will never be able to load in ngInit anymore

[NL33]

HI guys. I'm trying to follow how amplify is working with ivy. Is it safe to say that, for a production app, I should NOT try to use Angular 9 (with Ivy) + Amplify for auth?

In that case, I'll stick with Angular 8 + Amplify Auth for now.

[eshacham]

I confirm. I had to downgrade to angular 8 to make amplify authentication ui component to work.

[sammartinez]

@NL33 i can state that Amplify doesn’t currently support Angular 9 and Ivy. As stated above, please downgrade to Angular 8 as we do support this.

[NL33]

Thank you. It's helpful to get that clarity.

Right now, the docs just say, buried down: "Please also note that the AWS Amplify Angular components do not yet support Ivy." I recommend the team make this more clear--like at the top of the doc say that Amplify Auth does not yet work with Angular 9 with ivy, so it's recommended to downgrade to Angular 8 if you want to work with Amplify Auth.

[wickstargazer]

@sammartinez I still confirm that this fix resolves the ivy build issue Fix dynamic rendering to support Angular 9 in --> #4963

[cedvdb]

Ivy and ng9 support would be more than welcomed. The angular team fixed the _spread issue, but there is still an issue with AmplifyIonic module that does something with the FormModule.

Thing is ng9 also bumps the typescript version and so on so it's a bit annoying.

[wickstargazer]

Hi guys, i have published @flowaccoun/aws-amplify-angular version 4.2.11

@flowaccount/aws-amplify-angular

Its working with angular 9 now, the issue with the PR here is the auto-build isn't working because of yarn version and I changed the way its packaged, so it will take time for them to publish

We need to use it now, so I took the liberty :)

Cheers

[cedvdb]

@wickstargazer did you make a pull request here for this ? so we can upvote it ?

[wickstargazer]

Yes indeed i did, its here [Pull Request] (https://github.com/aws-amplify/amplify-js/pull/4963)

[krimple]

We have a client that we might use Amplify & Angular on - is Angular 9 / Ivy support moving forward or is the version above stable enough across all of Angular to get the job done?

[krimple]

Note - we ended up switching to the new official library

in package.json dependencies:
"aws-amplify": "^3.0.10",
"@aws-amplify/ui-angular": "^0.2.5",

We also decided NOT to use the Angular modules for now - just the core amplify Auth library and our own screens. No current problems with Angular 9 and this set above. I was not aware of the new library until someone else mentioned it. But there is a migration guide here: https://docs.amplify.aws/ui/q/framework/angular (the old one was listed on the nav bar as "Legacy". HTH anyone who ran into this and was concerned. Looks like it works for us.

[Yongshuai-Liu]

confirm. I had to downgrade to angular 8 to make amplify authentication ui component to work. this will block us from upgrading to angular 9, hopefully it resolve soon.

[ignaciofuentes]

I believe the issue is that you are still using the legacy npm package, which is not supported with Angular 9.

"Angular 9 is not supported in the legacy version of the Angular UI Components. If you app in using Angular 9, please see our new Angular UI Component package."

https://docs.amplify.aws/ui-legacy/q/framework/angular

[tannerabread]

This should be resolved now with new versions of the Angular Authenticator component. Please see this comment on a similar issue that outlines all that has been done to remedy this issue