setRoot does not work after using SDK - ionic2

Ionic version:
[ ] 3.X
Current behavior:
In my Application I have three options for login AWS Cognito Identity Provider , Google , facebook.
After successful login authentication when user moves to the Drivesetup Page, I set the Drivesetup Page as a root page (setRoot) but I'm facing a problem that user can easily go back again on login screen using mobile back button.
Expected behavior:
I am expecting that user can't go back to the login page by pressing mobile back button when I'm using setRoot to navigate the screen from login to dashboard.
Steps to reproduce:
Code Included.
GitHub Repo:-
https://github.com/saurabhschauhan/demoApp
Related code:
constructor(
public nav: Nav,
public app: App,
public navCtrl: NavController,) {
}
this.awsCredentialsService.login(data)
.then((awsCredentialsServiceResponse) => {
if (awsCredentialsServiceResponse['status'] == 'success') {
//navigate page
this.navCtrl.setRoot('DrivesetupPage');
//OR
//this.app.getRootNav().setRoot('DrivesetupPage');
//or
//this.nav.setRoot('DrivesetupPage');
this.toasterService.showToaster(email + `Logged in successfully`);
} else {
console.log('any other error');
}
})
Other information:
I had tried two more options this.app.getRootNav().setRoot('DrivesetupPage') and this.nav.setRoot('DrivesetupPage'); but both are not working for me.
Ionic info:
#ionic/cli-utils : 1.13.0
ionic (Ionic CLI) : 3.13.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.3.0
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 26.1.1
Node : v6.9.1
npm : 3.10.8
OS : Linux 3.16
Misc:
backend : pro
Thank you.

Related

How do i continue working with Amplify on a new machine?

I'm using react native for my project. On my old machine, when i ran amplify status, i had Auth, Api and Storage services listed.
I moved to my new machine, installed node, watchman, brew etc... and then navigated to my react native project and ran: react-native run-ios, and voila, my app is running. All the calls to my AWS Api, Auth and Storage are working perfectly.
Now i can make some amplify commands. Such as amplify status. I tried: amplify env add: here's what i got:
Users-MBP-2:projectname username$ amplify env add
Note: It is recommended to run this command from the root of your app directory
? Do you want to use an existing environment? Yes
? Choose the environment you would like to use: dev
Using default provider awscloudformation
✖ There was an error initializing your environment.
init failed
Error: ENOENT: no such file or directory, open '/Users/username/.aws/credentials'
at Object.openSync (fs.js:462:3)
at Proxy.readFileSync (fs.js:364:35)
at Object.readFileSync (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/util.js:95:26)
at IniLoader.parseFile (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/shared-ini/ini-loader.js:6:47)
at IniLoader.loadFrom (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/shared-ini/ini-loader.js:56:30)
at Config.region (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/node_loader.js:100:36)
at Config.set (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:507:39)
at Config.<anonymous> (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:342:12)
at Config.each (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/util.js:507:32)
at new Config (/usr/local/lib/node_modules/#aws-amplify/cli/node_modules/aws-sdk/lib/config.js:341:19) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/username/.aws/credentials'
}
Do you think credentials info needs to be brought/configured to my new machine?
When i run amplify configure project it's like doing an amplify init and building a project from scratch. I'm being asked:
? Enter a name for the project: ProjectName
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using (Use arrow keys)
angular
ember
ionic
react
❯ react-native
vue
none
etc....
I also already have a region, username and accessKey, secretAccess key etc..
I do not want to replace or ruin anything in my current backend or current project! Whats going on?
Ensure amplify-cli is installed and you're logged in with your AWS details.
npm install -g #aws-amplify/cli
amplify configure
Running amplify configure is mainly to give the cli knowledge of your AWS account so subsequent commands can have access to things.
If you get amplify: command not found errors try restarting your terminal. If still no luck, you will need to check amplify has been added to your PATH variable.
Run amplify env add , but choose an existing environment. This will let you choose the environment you created on your other machine so you can pull those settings down to your new machine.
amplify env add
? Do you want to use an existing environment? Yes
Production
Follow up with:
amplify pull
You don't need to run amplify add auth again or anything. All of that will pull down automatically after you've done the above.
You DO NOT need to do all config again, but some for sure
You have to install amplify cli npm install -g #aws-amplify/cli
use amplify pull
https://docs.amplify.aws/cli/start#amplify-pull
Follow the rest of steps -
-- provide the accessKeyId, secretAccessKey
-- region
-- select amplify project
and then rest of app related thing like IDE, directory......
I tried every solution then I found this. (in MacBook)
% sudo -i
Password:
~ root# npm install -g #aws-amplify/cli
-- Ctrl+D to exist from Root user
% amplify pull --appId xxxx --envName yyyy.
Note: To get --appId xxxx --envName yyyy
Log in to the AWS console. Choose AWS Amplify. Click your app. Go to Backend
environments. Find the backend environment you wish to pull. Click
Edit backend. See top right then click 'Local setup instructions
' ( amplify pull --appId
YOUR_APP_ID --envName YOUR_ENV_NAME )
Waiting until it request to verify your amplify.
✔ Successfully received Amplify Studio tokens.
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
✔ Synced UI components.
? Do you plan on modifying this backend? Yes
⠴ Building resource api/xxxx✅ GraphQL schema compiled successfully.
Edit your schema at ....
✔ Successfully pulled backend environment yyyy from the cloud.
✅
Successfully pulled backend environment staging from the cloud.
Run 'amplify pull' to sync future upstream changes.
% amplify pull
% npm install
% npm start
Hope this help every one!!
Happy Coding :)

White screen after splash screen in Ionic2

I have small problem with white screen after execute splash screen when I convert my application to *.apk, Its take 20 to 25 seconds then my application run fine.
So is there any settings or codes or any tools that solves this problem?
Notes
~ Application size : 19mb
~ Tested on Samsung galaxy J7 2016 - android 7.0
~ I used this way to convert my app to apk : How to generate ionic apk or ios without extra applications?
by using
ionic build android --prod
The boot time will reduced to like 5 seconds and for the white screen,
the issue was Splash screen autohiding, so disable the splash screen auto hide and from
app.component.ts
i hid it manually.
config.xml
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
app.component.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:string = 'HomePage';
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
To build your apk file just use:
ionic build android
(or) ionic cordova build android (In ionic3)
To run your app in device just use:
ionic run android (ionic cordova run android)
(or) ionic run android --livereload (for live reload) (ionic cordova run android --livereload)
See more about ioni cli
20s launch app is normal with debug mode. Run ionic build with --prod varible, you will see your app launch much faster but it take more time to build.

Ionic3 FirebaseDynamiLinks plugin_not_installed

When calling
firebaseDynamicLinks.onDynamicLink()
I get the warnings
console.warn: Native: tried calling FirebaseDynamicLinks.onDynamicLink, but the FirebaseDynamicLinks plugin
is not installed.
console.warn: Install the FirebaseDynamicLinks plugin: 'ionic plugin add
cordova-plugin-firebase-dynamiclinks'
But the plugin is installed:
ionic cordova plugin
> cordova plugin ls
✔ Running command - done!
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-buildinfo 1.1.0 "BuildInfo"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-customurlscheme 4.3.0 "Custom URL scheme"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-firebase-analytics 0.10.1 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-dynamiclinks 0.10.1 "FirebaseDynamicLinksPlugin"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"
es6-promise-plugin 4.1.0 "Promise"
ionic-plugin-deploy 0.6.7 "IonicDeploy"
ionic-plugin-keyboard 2.2.1 "Keyboard"
The method call throws the error
plugin_not_installed
You need to always access any ionic native/cordova plugin within platform.ready()
Do:
constructor(private platform:Platform){}
And in when you call the plugin:
this.platform.ready().then(() =>{
firebaseDynamicLinks.onDynamicLink();
//....
});

ionic.config.json syntax error at position 0

I'm trying to execute google maps web api for my ionic 2 project.
After adding a proxy (For the browser CORS issue) and executing ionic serve, the following error is returned.
Uh oh! There's a syntax error in your ionic.config.json file:
SyntaxError: Unexpected token in JSON at position 0
at Object.parse (native)
at Object.load (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\ionic-app-lib\lib\project.js:48:17)
at Object.runr (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\lib\cli.js:156:32)
at C:\Users\User\AppData\Roaming\npm\node_modules\ionic\lib\cli.js:54:9
at _fulfilled (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:787:54)
at self.promiseDispatch.done (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:816:30)
at Promise.promise.promiseDispatch (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:749:13)
at C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:557:44
at flush (C:\Users\User\AppData\Roaming\npm\node_modules\ionic\node_modules\q\q.js:108:17)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
The following is my ionic.config.json file:
{
"name": "NW",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/proxy",
"proxyUrl": "https://maps.googleapis.com/"
}
]
}
My System Information is as below:
Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed
I tried to fix this by checking for foreign tokens and using a newly generated default ionic.config.json but same error persists.
Appreciate any ideas or solutions to this issue.
Thanks.
Open your config file in Notepad++ and check the encoding format. The encoding format should be UTF-8 and nothing else, not even UTF-8 BOM. If it is, change it to UTF-8. save file and try running it again. Hope it helps.
Note: DO NOT USE Notepad to do the above steps, as notepad considers UTF_8 and UTF-8-BOM as same.

Custom Opsworks layer fails while deploying new Postgresql server

I'm following this guide to create a custom Postgresql layer within Opsworks to build a server for my Ruby on Rails app. I'm using this custom JSON as provided in the blog post:
{
"postgresql" : {
"password" : {
"postgres" : "unhackablepassword"
},
"contrib" : {
"packages" : ["postgresql-contrib-9.2"],
"extensions" : ["hstore"]
}
}
}
The following custom cookbooks are used (git://github.com/growthrepublic/cookbooks.git)
postgresql::contrib
postgresql::ruby
postgresql::server
postgresql
The instance setup fails with this error message:
[2014-01-08T20:36:49+00:00] FATAL: Chef::Exceptions::Package: package[postgresql-contrib-9.2] (postgresql::contrib line 24) had an error: Chef::Exceptions::Package: No version specified, and no candidate version available for postgresql-contrib-9.2
I'm new to Chef and Opsworks, does any one have any idea why it's failing?
Thanks!
Francis
I've had success by adding the OS Package: postgresql-server-dev-9.3