In a component (LoginPage) I'm trying to use
this.navCtrl.setRoot(otherPage)
but it keeps throwing
StaticInjectorError(Platform: core)[Content -> NavController]:
NullInjectorError: No provider for NavController!
How can I change the rootpage from a component?
I want to go from LoginPage to HomePage.
import { Component } from "#angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
import { AngularFireAuth } from "angularfire2/auth";
import * as firebase from "firebase/app";
import { HomePage } from "../../pages/home/home";
import { UserProvider } from "../../providers/user/user";
#IonicPage()
#Component({ selector: "page-login", templateUrl: "login.html" })
export class LoginPage { constructor(
public navCtrl: NavController,
public navParams: NavParams,
private afAuth: AngularFireAuth,
private userProv: UserProvider ) {}
signInWithFacebook() {
this.afAuth.auth
.signInWithPopup(new firebase.auth.FacebookAuthProvider())
.then(res => {
const user = res.user;
this.userProv.cargarUsuario(
user.displayName,
user.email,
user.photoURL,
user.uid,
"facebook"
);
this.navCtrl.setRoot(HomePage);
});
}
}
Related
I have had this error "NullInjectorError: No provider for Storage!" and then I add Storage in app.module.ts
then I had another error : Error: Can't resolve all parameters for Storage: (?, ?)
and sometime i had this error :
Uncaught TypeError: Cannot read property 'id' of undefined
core.js:24134 Uncaught TypeError: Cannot read property 'id' of undefined
at registerNgModuleType (core.js:24134)
at core.js:24145
at Array.forEach (<anonymous>)
at registerNgModuleType (core.js:24145)
at new NgModuleFactory$1 (core.js:24242)
at compileNgModuleFactory__POST_R3__ (core.js:27786)
at PlatformRef.bootstrapModule (core.js:28024)
at Module../src/main.ts (main.ts:11)
at __webpack_require__ (bootstrap:84)
at Object.0 (main.ts:12
I tried importing IonicStorageModule and it is the same
app.moudle.page.ts file :
import { Component, OnInit } from '#angular/core';
import { NavController, NavParams, LoadingController, AlertController, ModalController } from '#ionic/angular';
import { PersonalinfoService } from 'src/app/services/personalinfo.service';
import { AlertService } from 'src/app/services/alert.service';
import { Saudi } from '../../../app/models/saudi';
import { ErrorsService } from '../../../app/services/errors.service';
#Component({
selector: 'app-personalinfo',
templateUrl: './personalinfo.page.html',
styleUrls: ['./personalinfo.page.scss'],
})
export class PersonalinfoPage{
public personal_info : any;
private loading : any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private personalinfoService : PersonalinfoService,
private errorsService : ErrorsService,
public modalCtrl: ModalController,
private loadingCtrl : LoadingController,
private alertCtrl : AlertController,
public storage: Storage,
) {
this.personal_info = this.navParams.get('personal_info') || new Saudi();
// هذذا حلو بس ماضبط
// this.loading = this.loadingCtrl.create({
// content: 'Please wait...',
// spinner: 'bubbles'
// });
}
ionViewDidLoad() {
console.log('ionViewDidLoad addInfoPage');
}
addInfo() {
let data = {
personal_info: this.personal_info
}
this.personalinfoService.store( JSON.stringify( data ) ).subscribe(
personal_info => {
this.personal_info = personal_info;
this.loading.dismiss();
this.dismiss( true );
},
);
}
closeModal(){
this.dismiss(false);
}
dismiss( returnParam : boolean ) {
let data = { 'personal_info': this.personal_info, 'returnParam': returnParam };
this.modalCtrl.dismiss( data );
}
}
Register.page.ts file
import { Component, OnInit } from '#angular/core';
import { ModalController, NavController } from '#ionic/angular';
import { LoginPage } from '../login/login.page';
import { AuthService } from 'src/app/services/auth.service';
import { NgForm } from '#angular/forms';
import { AlertService } from 'src/app/services/alert.service';
#Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
constructor(private modalController: ModalController,
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService
) { }
ngOnInit() {
}
dismissRegister() {
this.modalController.dismiss();
}
async loginModal() {
this.dismissRegister();
const loginModal = await this.modalController.create({
component: LoginPage,
});
return await loginModal.present();
}
register(form: NgForm) {
this.authService.register(form.value.name, form.value.email, form.value.password).subscribe(
data => {
this.authService.login(form.value.email, form.value.password).subscribe(
data => {
},
error => {
console.log(error);
},
() => {
this.dismissRegister();
this.navCtrl.navigateRoot('/personalinfo');
}
);
this.alertService.presentToast(data['message']);
},
error => {
console.log(error);
},
() => {
}
);
}
}
before i add personal page everythings works fine.
I have nothing else but there is an id added in the model
update :
I get steps back when it is working and starting again
the thing is it happand again
I have page called Home, Personalinfo
Home is called after success login and called personalinfo page in Home page
I have importing it like this: because I have got this error "No provider for PersonalinfoService!"
home-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomePage } from './home.page';
import { PersonalinfoPage } from './../personalinfo/personalinfo.page';
const routes: Routes = [
{
path: '',
component: HomePage
}
];
#NgModule({
imports: [RouterModule.forChild(routes),
PersonalinfoPage
],
exports: [RouterModule],
})
export class HomePageRoutingModule {}
I DID MISS THE
#Injectable({
providedIn: 'root'
})
IN THE SERVICE FILE THATS WHERE CAME ALL THE MISS
THANK YOU
Like it's mentioned in the docs, you need to import IonicStorageModule.forRoot() in the AppModule:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot() // <--- here!
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}
Besides that, in your personalifo.ts file, you're injecting Storage but that's not actually Ionic's storage but the Web Storage API – you can see that when hovering on the Storage class:
In order to inject the right dependency, you'd need to add the following import at the top of the file: import { Storage } from '#ionic/storage'; to make sure you're using Ionic's storage:
import { Storage } from '#ionic/storage'; // <--- here!
// ...
#Component({
selector: 'app-personalinfo',
templateUrl: './personalinfo.page.html',
styleUrls: ['./personalinfo.page.scss'],
})
export class PersonalinfoPage {
constructor(
public storage: Storage,
// ...
) {}
}
I have this ionic 4 project (Using REST API) and have also install ionic native storage. I might have multiple questions concerning this project, but the first is:
I want to store login data so I can be able to pass a token to the header to be used for other endpoints. But if I run the app and try to login, I get the following error:
Error storing item
Object { code: 5, source: "Native", exception: null, stack: "" }
My auth ts is where my login function is:
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { tap } from 'rxjs/operators';
import { ApiService } from './api.service';
import { User } from '../models/user';
import { NativeStorage } from '#ionic-native/native-storage/ngx';
#Injectable({
providedIn: 'root'
})
export class AuthService {
isLoggedIn = false;
token: any;
constructor(
private http: HttpClient,
private api: ApiService,
private storage: NativeStorage
) { }
login(account_number: Number, password: String) {
return this.http.post(this.api.API_URL + '/login',
{account_number: account_number, password: password}
).pipe(
tap(token => {
this.storage.setItem('token', token)
.then(
() => {
console.log('Token Stored', token);
},
error => console.error('Error storing item', error)
);
this.token = token;
this.isLoggedIn = true;
return token;
}),
);
}
register(name: String, email: String, phone: Number, reference: String, account_number: String, password: String) {
return this.http.post(this.api.API_URL + '/register',
{ name: name, email: email, phone: phone, reference: reference, account_number: account_number, password: password }
)
}
logout() {
const headers = new HttpHeaders({
'Authorization': "auth-token" + this.token
});
return this.http.get(this.api.API_URL + '/logout', { headers: headers })
.pipe(
tap(data => {
this.storage.remove("token");
this.isLoggedIn = false;
delete this.token;
return data;
})
)
}
getToken() {
return this.storage.getItem('token').then(
data => {
this.token = data;
if (this.token != null) {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
},
error => {
this.token = null;
this.isLoggedIn = false;
}
);
}
}
And here is is my login.ts.
import { Component, OnInit } from '#angular/core';
import { ModalController, NavController } from '#ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { AlertService } from 'src/app/services/alert.service';
import { RegisterPage } from '../register/register.page';
import { NgForm } from '#angular/forms';
import { Router } from '#angular/router';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
userdata: any;
constructor(
private modalC: ModalController,
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService,
// private router: Router
) { }
ngOnInit() {
}
// Dismiss Login Modal
dismissLogin() {
this.modalC.dismiss();
}
// On Register button tap, dismiss login modal and open register modal
async registerModal() {
this.dismissLogin();
const registerModal = await this.modalC.create({
component: RegisterPage
});
return await registerModal.present();
}
login(form: NgForm) {
this.authService.login(form.value.account_number, form.value.password).subscribe(
data => {
this.userdata = data;
this.alertService.presentToast("Logged In");
console.log('this is loggin in userdata', data, "and this is the stored auth-token", this.userdata.message);
},
error => {
console.log(error, "logged in");
},
() => {
this.dismissLogin();
this.navCtrl.navigateRoot('/dashboard');
console.log('this is this.userdata', )
}
);
}
}
Here is aslo my app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy, } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '#angular/common/http';
import { NativeStorage } from '#ionic-native/native-storage/ngx';
#NgModule({
declarations: [
AppComponent,],
entryComponents: [
],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule
],
providers: [
StatusBar,
SplashScreen,
NativeStorage,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
You can simply use javascript local storage and also use Ionic native storge for your purpose.
Mostly is used localStorage.set(). In case just want to store strings.
u also use Ionic native storage for the object and many things.
https://ionicframework.com/docs/native/native-storage
I tried to set a orientation with ScreenOrientation, in ionViewDidLoad() in a device and the localhost but i can't force the change.
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ScreenOrientation } from '#ionic-native/screen-orientation';
#Component({
selector: 'page-Test',
templateUrl: 'Test.html'
})
export class TestPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private screenOrientation: ScreenOrientation) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY);
}
}
Try to:
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
}
OR
ionViewDidLoad() {
console.log('ionViewDidLoad TestPage');
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_SECONDARY);
}
You have to add this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY) line in app.components.ts files initializeApp() method before spash screen is hide.
Example :
app.components.ts
initializeApp() {
this.platform.ready().then(async () => {
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY).then(async ()=>{
this.statusBar.styleDefault();
this.splashScreen.hide();
this.rootPage="HomePage";
// rest of your code goes here
});
});
}
I'm new to ionic 3 and I'm trying to register. I have a accounts screen called accounts.ts that gets in src/pages/accounts/accounts.ts and then I'm trying to create a class where DAO will be referring to that class, I created it in the following src/dao/dao-accounts.ts location.
Some errors are showing up
My first doubt is this, do you mind this current?
import {DAOContas} from '../../dao/da-contacts';
I am also wanting to return a list of data but an error appears like this
:
uncaught (im promisse): referrererror: value is not defined
referenceerror: value is not defined at new ContasPage
class dao-accounts.ts
export class DAOContas {
constructor()
{
this.list = [];
}
getList()
{
this.list = [
{descricao:"Alimentação"},
{descricao:"Lazer"},
{descricao:"Transporte"}
];
return this.list;
}
}
method ContasPage.ts
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DAOContas } from '../../dao/dao-contas';
#Component({
selector: 'page-list',
templateUrl: 'contas.html'
})
export class ContasPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.dao = new DAOContas();
this.listcontas = this.dao.getList();
}
}
Error Occurs When Instantiating DAOContas
So the issue here relates to dependency injection pattern. See official documentation of how that works for more info.
Based on the code you provided it seems like the issue is with the way you organized your code and declared (or did not declare) certain variables.
In your ContasPage do ensure you:
import the class
declare the vars
do assignments in the constructor
So in your case you didn't declare the vars before the constructor:
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { DAOContas } from '../../dao/dao-contas';
#Component({
selector: 'page-list',
templateUrl: 'contas.html'
})
export class ContasPage {
// declare your vars here:
dao: any;
listcontas: any;
constructor(
public navCtrl: NavController
) {
this.dao = new DAOContas();
this.listcontas = this.dao.getList();
}
}
Same thing in your class you forgot to declare the var list:
export class DAOContas {
list: Array<{ descricao: string }>
constructor() {
this.list = [];
}
getList() {
this.list = [
{ descricao: "Alimentação" },
{ descricao: "Lazer" },
{ descricao: "Transporte" }
];
return this.list;
}
}
Also since your DAOContas to me looks like a data provider, I would probably think about turning it into a provider and injecting it into your page via constructor:
Make sure DAOContas is injectable:
import { Injectable } from '#angular/core'
#Injectable()
export class DAOContas {
list: Array<{ descricao: string }>
constructor() {
this.list = [];
}
getList() {
this.list = [
{ descricao: "Alimentação" },
{ descricao: "Lazer" },
{ descricao: "Transporte" }
];
return this.list;
}
}
Add it to your app.module.ts as provider:
import { DAOContas } from '../../src/providers/dao-contacts';
#NgModule({
declarations: [
bla
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [
DAOContas,
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
TestProvider
]
})
export class AppModule { }
Finally inject it to your page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { DAOContas } from '../../providers/dao-contacts';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage2 {
listcontas: any;
constructor(
public navCtrl: NavController,
public dao: DAOContas
) {
this.listcontas = this.dao.getList();
console.log(this.listcontas)
}
}
I'm integrating with facebook for application users to sign in with facebook.
I'm testing the documentation code for ionic 2 but it's not working right every time it drops the error condition. Is there anything else to be done?
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RecuperarSenhaPage } from '../recuperar-senha/recuperar-senha';
import { CadastroUsuarioPage } from '../cadastro-usuario/cadastro-usuario';
import { Facebook, FacebookLoginResponse } from '#ionic-native/facebook';
import { BrowserModule } from '#angular/platform-browser';
#Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
constructor(public navCtrl: NavController,
public navParams: NavParams,
private _fb: Facebook) {
}
loginFacebook() {
this._fb.login(['email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', JSON.stringify(e)));
}
}