Auth Component in Angular 9 giving error in console as follows. Could this be a version issue . How can this be fixed?

2
votes

auth.component.html:

<amplify-authenticator></amplify-authenticator>

auth.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

enter image description here

--------------------------------## Heading ## Error:

ERROR TypeError: Cannot read property 'viewContainerRef' of undefined at AuthenticatorComponent.push../node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.loadComponent (authenticator.factory.js:47) at AuthenticatorComponent.push../node_modules/aws-amplify-angular/ivy_ngcc/dist/src/components/authenticator/authenticator/authenticator.factory.js.AuthenticatorComponent.ngOnInit (authenticator.factory.js:31) at callHook (core.js:4726) at callHooks (core.js:4690) at executeInitAndCheckHooks (core.js:4630) at refreshView (core.js:12013) at refreshComponent (core.js:13445) at refreshChildComponents (core.js:11716) at refreshView (core.js:12051) at refreshEmbeddedViews (core.js:13391)

2
reactjsangularuser-interfaceaws-amplifyangular9

2 Answers

0
votes

It is not supported in Angular 9.

Found this in the docs

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.

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

0
votes

I looked around and found that the package 'aws-amplify-angular' doesn't really work with Angular 9 and above. I have even tried with 11 and it does the same.

The solution is to migrate from 'aws-amplify-angular' to '@aws-amplify/ui-angular'

Steps for integration are available here - https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular