AuthUserPoolException: Auth UserPool not configured

Question

I'm getting this error AuthUserPoolException: Auth UserPool not configured. ... underlyingError: undefined, recoverySuggestion: 'Make sure to call Amplify.configure in your app with userPoolId and userPoolClientId.', constructor: [class _AmplifyError extends Error] Whenever I start a localhost of my angular project. this is my main.ts where i call the amplify configure

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import cdkOutput from '../../../ForumWebCDK/output.json';
import { Amplify } from 'aws-amplify';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error("ERROR:" , err));

    Amplify.configure({
      Auth: {
        Cognito: {
          userPoolId: cdkOutput.CognitoStack.PoolId,
          userPoolClientId: cdkOutput.CognitoStack.ClientId,
          signUpVerificationMethod: 'code',
        }
      }
    }); 

    const currentConfig = Amplify.getConfig();

I don't know why this is throwing the error as this is my second project using amplify, and I have the same configuration in the other one as well and no errors are shown. The difference between the two user pools is this one also has a username on top of the email and password, the one that doesn't throw the error only has the email and username. I've also checked versions of amplify between the two and when they both match I still get the same error. Here is the github repository of the full angular frontend: https://github.com/zachpfaltzgraff/ForumWebsite I am still able to login to the website and everything functions as expected, just don't know why this error is being shown Thanks in advance if you can help!

I've tried installing older versions of amplify as I saw one thing that said it's a version issue.

Answer 1

Am posting this solution for those who have the same issue as me. For me it was a simple fix. I needed to configure amplify in app.component.ts instead of main.ts I'm not sure why this changed from my previous project to this as I used the same versions of everything. This is what my fixed code looks like for those wondering

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderBarComponent } from './header-bar/header-bar.component';
import { HttpClientModule } from '@angular/common/http';

import { Amplify } from 'aws-amplify';
import cdkOutput from '../../../../ForumWebCDK/output.json';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, 
        RouterOutlet, 
        HeaderBarComponent, 
        HttpClientModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Forum-Web';

  constructor() {
    Amplify.configure({
      Auth: {
        Cognito: {
          userPoolId: cdkOutput.CognitoStack.PoolId,
          userPoolClientId: cdkOutput.CognitoStack.ClientId,
          signUpVerificationMethod: 'code',
          loginWith: {
            username: true,
            email: true,
          }
        }
      }
    });
  }
}

It's a very easy fix and in hindsight shouldn't have taken me this long to figure out. If anyone has this same issue and this doesn't work feel free to comment on here!