Integration issue in angular with aws-amplify for google sign up

Question

I am trying to integrate with AWS-Amplify(^4.3.0) with angular-12 and typescript (4.3.5). I have configured amplify properly as mentioned in the documents but when I am trying to start the app got some amplify errors, Which are shown in 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 info see: 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 info see: 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 {

As per the DOC . After complete configure of AWS-Amplify with Cognito. I added the code below code in main.ts

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

Any help will be appreciated? Kindly let me know where am I doing wrong?

Answer 1

I could reproduce this as well. This specifically happens to Angular 12 because it turns on strict mode by default , and @aws-amplify/storage type is not compliant with strict mode. You can bypass this error by setting

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

But this is worth creating an issue at their repo so that their storage type is compliant with strict mode if you're interested in doing so.

edit: found more scoped compilerOption for removing the error

Answer 2

You can remove CommonJS or AMD dependencies can cause optimization bailouts..... by adding below code snippet in to build section of your angular.json

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

   ]