Angular integration problem with aws-amplify when signing up with Google account

I am attempting to integrate AWS-Amplify(^4.3.0) with angular-12 and typescript (4.3.5). I have followed the documentation to configure amplify properly, but when trying to start the app, I encountered some amplify errors as shown below.

Warning: D:\Google Sign-IN Demo\google-test\node_modules\amazon-cognito-identity-js\es\AuthenticationHelper.js depends on 'crypto-js/lib-typedarrays'. CommonJS or AMD dependencies can cause optimization bailouts. For more information, please refer to: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: D:\Google Sign-IN Demo\google-test\node_modules\amazon-cognito-identity-js\es\Client.js depends on 'isomorphic-unfetch'. CommonJS or AMD dependencies can cause optimization bailouts. For more information, please refer to: https://angular.io/guide/build#configuring-commonjs-dependencies

Error: node_modules/@aws-amplify/storage/lib-esm/types/Storage.d.ts:44:46 - error TS2344: Type 'T[U]' does not satisfy the constraint '(...args: any) => any'. Type 'T["get"] | T["copy"] | T["put"] | T["remove"] | T["list"]' is not assignable to type '(...args: any) => any'. Type 'T["copy"]' is not assignable to type '(...args: any) => any'. Type '((src: StorageCopyTarget, dest: StorageCopyDestination, config?: any) => Promise) | ((src: StorageCopyTarget, dest: StorageCopyDestination, config?: any) => Promise<...>) | undefined' is not assignable to type '(...args: any) => any'. Type 'undefined' is not assignable to type '(...args: any) => any'.

44 } : U extends 'copy' ? never : LastParameter<T[U]> & { ~~~~

Type 'T["get"] | T["copy"] | T["put"] | T["remove"] | T["list"]' is not assignable to type '(...args: any) => any'. Type 'T["copy"]' is not assignable to type '(...args: any) => any'. Type '((src: StorageCopyTarget, dest: StorageCopyDestination, config?: any) => Promise) | undefined' is not assignable to type '(...args: any) => any'. Type 'undefined' is not assignable to type '(...args: any) => any'.

58 declare type PickProviderOutput<DefaultOutput, T, api extends StorageProviderApi> = T extends StorageProvider ? T['getProviderName'] extends 'AWSS3' ? Promise : ReturnType<T[api]> : T extends {

Following the documentation, after fully configuring AWS-Amplify with Cognito, I added the following code in main.ts:

import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);

Any assistance would be greatly appreciated! Please advise me on where I might be going wrong?

Answer №1

After carrying out my own tests, I experienced the same issue. This specific problem is observed in Angular 12 due to the default activation of strict mode (as mentioned in the documentation), which clashes with the @aws-amplify/storage type. In order to work around this error, you can disable it by adjusting these settings:

{
  "compilerOptions": {
    ...
    "strictNullChecks": false,
  }
}

However, it may be beneficial to raise an issue on their repository to ensure that their storage type aligns with strict mode, especially if you are inclined to do so.

edit: Further investigation revealed additional compiler options for resolving the error.

Answer №2

If you want to prevent optimization bailouts caused by CommonJS or AMD dependencies, simply insert the following code snippet into the build section of your angular.json file:

"allowedCommonJsDependencies": [
      "crypto-js",
      "isomorphic-unfetch"

   ]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with an Angular standalone component? Remember, `imports` should consist of an array containing components, directives, pipes, or NgModules

Recently, I upgraded my application to Angular v15 and decided to refactor a component to make it Standalone. However, when I tried importing dependencies into this component, I encountered the following error: 'imports' must be an array of co ...

What causes the issue of Angular 9 routing breaking upon page refresh?

I have deployed my Angular 9 application on Heroku and everything is working perfectly. However, when I refresh the page or copy/paste a link, I get an error message saying "Cannot GET /XXX/XXX". Only the root link seems to work! Initially, I can navigate ...

Failing Cypress component test: When leveraging an index.ts file for importing and exporting services

Tech stack: Angular v15 and Cypress v12. My example component that I'm testing: import { Component } from '@angular/core'; import { UserHttp } from '../../services'; @Component({ selector: 'example-view', templateUr ...

Error: Unable to access postal code property since it is null in Angular 6

My application requires the user's firstName, lastName, email, mobile, and password. The User Account Information page should display fields such as firstName, lastName, mobile, gender, email, street1, street2, province, suburb, and postalCode. Howeve ...

Hold off on progressing until the http.get request in Angular 4 has completed

Currently, I am in the process of creating a new registration form for an app using Ionic and utilizing ASP.Net(C#) for my API. My objective is to validate if a user already exists when the input blur event is triggered. However, I'm encountering an ...

Verifying the presence of an object in an array based on its value using TypeScript

Having the following dataset: roles = [ {roleId: "69801", role: "ADMIN"} {roleId: "69806", role: "SUPER_ADMIN"} {roleId: "69805", role: "RB"} {roleId: "69804", role: "PILOTE"} {roleId: "69808", role: "VENDEUR"} {roleId: "69807", role: "SUPER_RB"} ] The o ...

Adjusting ngClass dynamically as values change

Currently, I am facing a situation where I want to dynamically add a class to my view using ngClass based on changes in the output value. The output value is dependent on the response received from an API, and I am fetching data from the endpoint every sec ...

Keep the list up-to-date by adding new items promptly

Utilizing Angular 7, I have implemented the following service (Click here for StackBlitz Example): @Injectable({ providedIn: 'root' }) export class TodoService { todos: BehaviorSubject<Todo[]> = new BehaviorSubject([ { id: 1, tit ...

Unit testing in Angular - creating mock services with observables

I'm currently facing an issue with my unit tests for a component that subscribes to an Observable from the service DataService in the ngOnInit() lifecycle hook. Despite my efforts, I keep encountering the error message TypeError: Cannot read propertie ...

Cannot perform table inserts or creates with NestJS Sequelize functionality

I am currently in the process of setting up a small web server with a MySQL database. To achieve this, I am utilizing NestJs along with Sequelize. However, as I am still in the learning phase, I seem to be encountering an error: Within my database, I have ...

Adding extra fields to an existing JSON response in a TypeScript REST API

I am in need of an additional column to be added to my response data. Currently, I am fetching data from multiple REST endpoints one by one and merging the results into a single JSON format to display them in an Angular Mat table. The columns that I want t ...

What is the reason behind the lack of covariance in an interface when using a type of T[keyof T]?

I'm attempting to enable type covariance so that Type<Cat> can be treated as a Type<Animal>, for instance, treating a list of Cats as a list of Animals. However, using the type T[keyof T] in a method within the Type interface seems to hind ...

Using Vue 2 with a personalized Axios setup, integrating Vuex, and incorporating Typescript for a robust

I'm still getting the hang of Typescript, but I'm facing some challenges with it when using Vuex/Axios. Current setup includes: Vue CLI app, Vue 2, Vuex 3, Axios, Typescript At a high level, I have a custom Axios instance where I configure the ...

Utilizing React Custom Hooks for Firestore Data Retrieval

I recently developed a React custom hook that interfaces with a Firestore database. I followed the guidelines provided on the Firebase website, but I encountered an issue upon re-rendering the component. After refreshing my app, the useEffect hook function ...

Angular6: Generating a dynamic list of radio buttons with unique identifiers

I have a challenge in creating a dynamic list of radio buttons from a JSON array. While I can successfully do that, the specific requirement is to assign a unique ID to each radio button generated. The structure of my JSON data is as follows: this.employe ...

Steps for setting up a voice and video chat system between VR devices and an Angular frontend

Hello, I am currently developing an application that links VR devices (Unity) with Angular frontends through the transmission of data to an Asp.net Core 3.1 API. The entire connection relies on SignalR Core to send JSON objects. However, a new requirement ...

Setting up a development environment for .NET Core 2.0 with an Angular template and website template that can be easily downloaded using NPM

Currently, I am embarking on a new project utilizing .NET Core 2.0 with the Angular template. My intention is to integrate an existing HTML template into my project. After some research, I opted for a free HTML template called Gentelella which I have to in ...

Date Polyfill with Internationalization API in Angular 4/Angular-cli is not functioning as expected

I am struggling to make the polyfill of the Internationalization API work properly. The documentation (https://angular.io/docs/ts/latest/guide/pipes.html) states that all you need to do is add a script to your index.html: <script src="https://cdn.poly ...

Potential null object in React/TypeScript

Encountering a persistent error here - while the code functions smoothly in plain react, it consistently throws an error in typescript stating "Object is possibly null". Attempts to resolve with "!" have proved futile. Another error logged reads as follow ...

How come Typescript claims that X could potentially be undefined within useMemo, even though it has already been defined and cannot be undefined at this stage

I am facing an issue with the following code snippet: const productsWithAddonPrice = useMemo(() => { const addonsPrice = addonsSelected .map(id => { if (addons === undefined) { return 0} return addons.find(addon => addo ...