Angular production build fails with Amplify.configure() using pre-existing user pool and auth domain

Describe the bug

• Adding Amplify.configure(config) to ‘main.ts’ succeeds with ng serve but fails with ng serve --prod .
• When using ng serve --prod the page loads completely blank with an error in the console.
• When using ng serve the page loads correctly and all the code leveraging the aws-amplify library works as expected.
• The error in the console: Uncaught TypeError: Cannot read property 'call' of undefined

To Reproduce Steps to reproduce the behavior:

1. Create a new angular application with the CLI. ng new testing-angular-with-amplify
2. CD into application directory. cd testing-angular-with-amplify
3. Install aws-amplify. npm install aws-amplify --save
4. Add the necessary polyfills code to “polyfills.ts”

(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

1. Add AWS Amplify configuration code to ‘main.ts’.

import Amplify from 'aws-amplify';
import { Auth } from "aws-amplify";

console.log("loaded main.ts");

let config = {
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_XXXXXXXXX',
    userPoolWebClientId: 'XXXXXXXXXXXXXXXX',
    oauth: {
        domain: 'AUTH_DOMAIN.com',
        scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
        redirectSignIn: 'http://localhost:4200',
        redirectSignOut: 'http://localhost:4200',
        responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
    }
  }
}

Amplify.configure(config);

const currentConfig = Auth.configure();

console.log("currentConfig: ", currentConfig);

1. Page loads completely blank with one error in the console.

Expected behavior The expectation is that the application will load successfully using ng serve --prod as it does with ng serve

Code Snippet

• See Steps 4 and 5.

Screenshots Result of running ng serve

Result of running ng serve --prod:

What is Configured? If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources. – Did not use the Amplify CLI

• Which resources do you have configured? – See Step 5.

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
    Memory: 6.01 GB / 19.41 GB
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.66
    Edge: Spartan (44.18362.449.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @angular-devkit/build-angular: ~0.900.0 => 0.900.7
    @angular/animations: ~9.0.0 => 9.0.7
    @angular/cli: ~9.0.0 => 9.0.7
    @angular/common: ~9.0.0 => 9.0.7
    @angular/compiler: ~9.0.0 => 9.0.7
    @angular/compiler-cli: ~9.0.0 => 9.0.7
    @angular/core: ~9.0.0 => 9.0.7
    @angular/forms: ~9.0.0 => 9.0.7
    @angular/language-service: ~9.0.0 => 9.0.7
    @angular/platform-browser: ~9.0.0 => 9.0.7
    @angular/platform-browser-dynamic: ~9.0.0 => 9.0.7
    @angular/router: ~9.0.0 => 9.0.7
    @types/jasmine: ~3.5.0 => 3.5.14
    @types/jasminewd2: ~2.0.3 => 2.0.8
    @types/node: ^12.11.1 => 12.19.8
    aws-amplify: ^3.3.11 => 3.3.11
    codelyzer: ^5.1.2 => 5.2.2
    jasmine-core: ~3.5.0 => 3.5.0
    jasmine-spec-reporter: ~4.2.1 => 4.2.1
    karma: ~4.3.0 => 4.3.0
    karma-chrome-launcher: ~3.1.0 => 3.1.0
    karma-coverage-istanbul-reporter: ~2.1.0 => 2.1.1
    karma-jasmine: ~2.0.1 => 2.0.1
    karma-jasmine-html-reporter: ^1.4.2 => 1.5.4
    protractor: ~5.4.3 => 5.4.4
    rxjs: ~6.5.4 => 6.5.5
    ts-node: ~8.3.0 => 8.3.0
    tslib: ^1.10.0 => 1.14.1
    tslint: ~5.18.0 => 5.18.0
    typescript: ~3.7.5 => 3.7.5
    zone.js: ~0.10.2 => 0.10.3
  npmGlobalPackages:
    @angular/cli: 9.0.0
    @angular/core: 9.0.0
    @aws-amplify/cli: 4.29.6
    aws-cdk: 1.75.0
    create-react-native-app: 3.1.1
    expo-cli: 3.20.3
    gulp: 4.0.2
    http-server: 0.12.3
    react-native-cli: 2.0.1
    typescript: 4.0.3
    yarn: 1.22.4

Smartphone (please complete the following information):

• N/A

Additional context

• We are using the Cognito Hosted UI for authentication and some of the methods in the ‘Auth’ class to get the authenticated user and send tokens to the backend. This is a new application being developed and are open to angular/amplify version changes if necessary.

[nsquires413]

Thanks! We are relying on a library that currently only supports Angular 10 but should be updated to Angular 11 hopefully by the end of the month (ng-zorro-antd) and then we could make the change to Angular 11. I am going to see if I can reproduce this for Angular 10 to see if there is still an issue.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.