aws-amplify integration with Nativescript (angular)

Question

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.

Pravesh Khatana Pravesh Khatana · Accepted Answer · 2018-04-29T20:43:30

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);

aws-amplify integration with Nativescript (angular)

1 Answers