axiosangular2-nativescriptaws-amplify

aws-amplify integration with Nativescript (angular)


I am trying to integrate ams-amplify with NativeScript but I am not able to get it to work successfully.

import { Component, OnInit } from "@angular/core";

require("nativescript-nodeify");

var Amplify = require("aws-amplify");

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {


    constructor() {
        // Use the component constructor to inject providers.
        Amplify.configure({
            Auth: {
            // REQUIRED - Amazon Cognito Identity Pool ID
                identityPoolId: 'xxxxx', 
            // REQUIRED - Amazon Cognito Region
                region: 'xxxx', 
            // OPTIONAL - Amazon Cognito User Pool ID
                userPoolId: 'xxxx',
            // OPTIONAL - Amazon Cognito Web Client ID
                userPoolWebClientId: 'xxxxx', 
            }
        });

    }

    ngOnInit(): void {

    }
}

But I am getting some "navigator is not defined" error.

JS: ERROR Error: Uncaught (in promise): ReferenceError: navigator is not defined JS: ReferenceError: navigator is not defined JS: at standardBrowserEnv (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/helpers/isURLSameOrigin.js:11:39) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/helpers/isURLSameOrigin.js:60:5) JS: at require (:1:266) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/adapters/xhr.js:7:23) JS: at require (:1:266) JS: at getDefaultAdapter (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/defaults.js:20:15) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/defaults.js:29:12) JS: at require (:1:266) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/core/Axios.js:3:16) JS: at require (:1:266) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/lib/axios.js:5:13) JS: at require (:1:266) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/axios/index.js:1:78) JS: at require (:1:266) JS: at Object. (file:///data/data/org.nativescript.awsamplify/files/app/tns_modules/aws-amplify/lib/API/RestClient.js:70:15)

If anyone has working code, please share.


Solution

  • The problem is with latest version of aws-amplify.

    Changed it to "aws-amplify": "^0.2.9" version and everything working fine now :)

    Edit: Working Solution with latest Amplify version

    import * as storage from "nativescript-localstorage";
    import { Buffer } from "buffer";
    import "nativescript-nodeify";
    
    global["window"] = {};
    global["window"]["localStorage"] = storage;
    global["window"]["addEventListener"] = args => {
      return args;
    };
    global["window"]["navigator"] = {};
    global["window"]["Buffer"] = Buffer;
    global["window"]["setTimeout"] = setTimeout;
    global["window"]["clearTimeout"] = clearTimeout;
    
    global["navigator"] = {};
    
    global["navigator"]["product"] = "ReactNative";
    import Amplify, { Auth, Storage } from "aws-amplify";
    import aws_config from "~/aws-exports";
    Amplify.configure(aws_config);