Calling Auth.signUp from an Angular Package Format Library produces type error?

Issue

Most of the aws-amplify auth functions can be call from Angular libraries. For example Auth.signout() works fine.

However I tried to put the following implementation in a library service:

  /**
   * @param firstName The first name
   * @param lastName The last name
   * @param email The email
   * @param password The password
   * @returns The signup result
   */
   export function signUp(
    firstName: string,
    lastName: string,
    email: string,
    password: string) {
    return Auth.signUp({
      username: email,
      password,
      attributes: {
        email,
        name: firstName,
        given_name: firstName,
        family_name: lastName
      }
    });
  }

However when any of the functions in the library are imported like this for example:

import { Component } from '@angular/core';
import { getCurrentAuthenticatedUserAttributes} from 'amplifylibe'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 't1';
}

It produces the following error:

Build at: 2022-02-04T20:58:53.577Z - Hash: bd84be34957baf56 - Time: 112ms

Error: node_modules/amplifylibe/lib/auth.functions.d.ts:1:23 - error TS2688: Cannot find type definition file for 'amazon-cognito-identity-js'.

1 /// <reference types="amazon-cognito-identity-js" />
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/amplifylibe/lib/auth.functions.d.ts:14:118 - error TS2307: Cannot find module 'amazon-cognito-identity-js' or its corresponding type declarations.

14 export declare function signUp(firstName: string, lastName: string, email: string, password: string): Promise<import("amazon-cognito-identity-js").ISignUpResult>;
                                                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To show this I published a minimal library with the functions to NPM:

https://www.npmjs.com/package/amplifylibe

The corresponding github repository is: https://github.com/fireflysemantics/tsamplifyapidemotest

That contains the signup function. I also created an Angular 13 app that produces the error when ng serve is run:

git clone git@github.com:fireflysemantics/tsamplifylibdemoapp.git
cd tsamplifylibdemoapp
npm i 
ng serve

Any ideas on how to go about fixing this?

Solution

So it looks like the fix is pretty simple. Just declare a Promise<any> return type like this:

  /**
   * @returns The result promise
   */
  async getCurrentAuthenticatedUserAttributes(): Promise<any> {
    const { attributes } = await Auth.currentAuthenticatedUser();
    return attributes
  }

Without the return type declared, it looks like Typescript tries to infer the correct return type from amplify and this is unavailable to the library when the application compiles.

Answered By - Ole