i'm trying to make an app that has login page then after login the user must be insde tabs page, i get error
app.components.ts
import { LoginPage } from '../pages/login/login';
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = LoginPage;
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();
});
}
}
login.ts
signIn(){
this.navCtrl.push(TabsPage);
}
login.html
<button ion-button block (click)="signIn()">Sign In</button>
when i click sign in button i get the below error, please help
Runtime Error
Uncaught (in promise): invalid views to insert
Stack
Error: Uncaught (in promise): invalid views to insert
at c (http://localhost:8100/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51705:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:51698:14)
at http://localhost:8100/build/vendor.js:51745:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242
I finally found it write, i didn't not import TabsPage, after import it was working well
Related
I am using the Iconic 4 framework and I'm trying to use the FirebaseUIAuth feature within my application but I am facing an issue when the user signs in.
Issue: When the user logs in, the sign in buttons disappear for the web & ios rendering of the application on my localhost (this is good), but I am having issues with the Android rendering. After logging in, the login/sign in buttons remain visible in the android rendering (not good...womp womp).
I have tried changing the signInFlow parameter to 'redirect' but the extent of my knowledge with the Ionic Framework has me a bit stumped since I am confused on how to get the login buttons redirect the user to a new view.
[app.module.ts file with firebaseUI config only]
const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup', /*tried using 'redirect' to fix android rendering*/
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
{
scopes: [
'public_profile',
'email',
'user_likes',
'user_friends'
],
customParameters: {
'auth_type': 'reauthenticate'
},
provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
},
{
requireDisplayName: true,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
}
],
tosUrl: '/terms',
privacyPolicyUrl: '/privacy',
credentialHelper: firebaseui.auth.CredentialHelper.NONE
};
[home.page.html file with firebaseui tag]
<ion-content padding>
<firebase-ui></firebase-ui>
<h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}!</h1>
<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>
</ion-content>
[home.page.ts file with signout method]
import { Component } from '#angular/core';
import { AngularFireAuth } from '#angular/fire/auth';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public afAuth: AngularFireAuth,) {
}
signOut() {
this.afAuth.auth.signOut().then(() => {
location.reload();
});
}
}
I expected that the android rendering will only display:
Welcome some user!
But it also displays the sign in buttons that are configured with the firebaseui (google, facebook, email)
I am trying to use ionic 4 and cordova-plugin-file to get files from phone but it trows an error;
When i do console.log(cordova.file) like in the doc it shows cordova does not have property 'file'.
When i do
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, fail); it show 'requestFileSystem' not a property of window.
even if i do window.cordova it trow thesame error.
and unlike ionic 3 here if i add File to providers it trows an error as well
Please what is it i'm doing wrong?
Here is my ** home.page.ts**
import {Component} from '#angular/core';
import {Platform} from '#ionic/angular';
import {File} from '#ionic-native/file';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public platform: Platform) {
platform.ready().then(() => {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
console.log(fileSystem)
}, function(error) {
console.log(error);
});
});
}
}
For Ionic 4 you should add 'ngx' at the end of the import.
Like this,
import {File} from '#ionic-native/file/ngx';
Make sure to add it to the providers list of your module file, and also inject it to the constructor of the class where ever you are using the plugin.
Reference https://ionicframework.com/docs/native
I want to make webview to show my webpage with crosswalk plugin. When I put my url, and click the button. I got error
"Application Error"
"net:ERR_INSECURE_RESPONSE
(https://example.dummy.com:8444)"
my home page is using https
this is my code :
home.html
<ion-slide>
<h2>Please, Enjoy to call with our customer service</h2>
<button ion-button block full (click)="goToPage('https://oscar2.kebhana.co.id:8444/gibPT/intn/info/call#359854')">Start Video Call</button>
</ion-slide>
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
goToPage(url : string) {
window.open(url, '_self');
}
}
Please help me to fix. Thank you
#anggaerlangga you can use InAppBrowser to open an external link. because IONIC is not a web application you have to use any browser for open external URL. I will show you how can you use the InAppBrowser.
first of all you have to install InAppBrowser NPM from the ionic native.
import { InAppBrowser} from '#ionic-native/in-app-browser';
let baseurl = 'your url';
let target = "_blank";
this.iab.create(baseurl,target);
Thank you. this will definitely help you.
I am working with ionic v3.2.0 and as a part of requirement I have created another root component named as start.component.ts and start.modulue.ts. Which is a just copy of app.component.ts and app.modulue.ts.
I have implemented lazy loading in appModule.
main.ts
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
app.component.ts
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = "LoginPage";
...
}
Everything is working fine and Login module is getting load.
No I changed to startModule
main.ts
import { StartModule } from "./start.module";
platformBrowserDynamic().bootstrapModule(StartModule);
start.component.ts
export class StartApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = "LoginPage";
...
}
This is giving me error like :
main.js:1436 ERROR Error: Uncaught (in promise): invalid link: LoginPage
login.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
#NgModule({
declarations: [
LoginPage
],
imports: [
IonicPageModule.forChild(LoginPage)
],
exports: [
LoginPage
]
})
export class LoginPageModule {}
login.ts
#IonicPage()
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
....
}
P.S. : If I remove LazyLoding, everything is working fine. And I have tried using latest ionic version 3.4.0, but same error.
Solution rename your file from start.module.ts back to app.module.ts.
because when ionic start compilation it start looking for file named app.module.ts when it didn't find it in app directory; then generate warning and error similar to this
The main app NgModule was not found at the following path:
C:\Users\muham\Documents\ionic-projects\todo\src\app\app.module.ts
Which means it is hard coded in ionic-cli for compilation process. So, application require file named app.module.ts in app to compile and build.
Hopefully this will resolve the problem
I've added ionic cloud services to my app and want to use the native FaceBook authentication.
import { FacebookAuth } from '#ionic/cloud-angular';
this.facebookAuth.login()
When running this function on an Android phone, as expected I get the Facebook prompt to ask if my app can get permissions to read profile and email. When I click YES, the function returns an empty ERROR object:
Object {}
I'm sure I am catching it right, because when I choose CANCEL on the FB prompt, I get this error object:
Object {errorCode: "4201", errorMessage: "User cancelled dialog"}
Note: I'm using remote web inspector in chrome to see the full console. Unfortunately, as this requires a real device I can not Plunker this. However, I hope someone has an idea why this could happen. I have followed all these steps, including the FB developer settings, the hash and the ionic.io settings.
I have done that and it's working fine on the real device.If you have any question, please comment below.
Play with Git Repo
app.module.ts
import { CloudSettings, CloudModule } from '#ionic/cloud-angular';
const cloudSettings: CloudSettings = {
'core': {
'app_id': 'd32c02d2'
},
'auth': {
'facebook': {
'scope': ['public_profile', 'email']
}
}
};
#NgModule({
declarations: [
],
imports: [
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
],
providers: [
]
})
export class AppModule { }
home.html
<button ion-button block type="button" (click)="fbLogin()">Fb Login</button>
home.ts
import { Component } from '#angular/core';
import { FacebookAuth, User } from '#ionic/cloud-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public facebookAuth: FacebookAuth, public user: User) {
}
fbLogin() {
this.facebookAuth.login();
}
}
Ok it's quite silly, but the first root cause was that the FB user I was trying to log in with was not registered as a tester. Apparently in that case, an empty error is returned by the plugin.
After adding as a tester, I received a real error (Andoird manifest dod not allow internet access). After fixing that issue, again I'm getting an empty error.
So my assumption is that some of the errors returned by FB are not well communicated by the plugin and so any other FB error can be causing this issue.
UPDATE 23/04: There seems to be a change from FB side, now the FB login screen did not succeed but gave an error about the hashing key. After fixing that issue, the FB login is working now.