Some problem in response?
import { Component } from '#angular/core';
import { ActivatedRoute, Router, NavigationExtras } from '#angular/router';
import { ToastController, NavController } from '#ionic/angular';
import { HttpClient, HttpHeaders } from '#angular/common/http';
#Component({ selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page
{
apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
apiUrl ='http://api.watchover247.com/api/users/authenticated_user';
data1: any;
Data: any;
constructor(private route: ActivatedRoute,
public router: Router,
public toastCtrl: ToastController,
public http:HttpClient) {
this.route.queryParams.subscribe(params => {
console.log("params: ",params);
if(params && params.special) {
this.data1 = JSON.parse(params.special);
}
if(this.router.getCurrentNavigation().extras.state) {
this.data1 = this.router.getCurrentNavigation().extras.state.user;
}
});
}
ngOnInit() {
var headers = new HttpHeaders({'x-watchover-key': this.apiKey});
let body = { auth_email:"gurnaibsingh0015#gmail.com" }
this.http.post(this.apiUrl,body, {headers: headers}).subscribe
(data => { this.Data = data; console.log(data); },
error => {console.log(error);
});
}
}
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 am also getting the same error , NO provider for the class
AppHttpInterceptor even i added the provider in the app module and done every small thing to get it worked.
Please go through the code
http.interceptor.ts
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { Injectable } from "#angular/core"
import { Observable } from "rxjs";
import { tap, catchError } from "rxjs/operators";
import { ToastrService } from 'ngx-toastr';
import { of } from 'rxjs/observable/of';
#Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
constructor(public toasterService: ToastrService) { }
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
console.log('start')
return next.handle(req).pipe(
tap(evt => {
console.log(evt);
alert();
if (evt instanceof HttpResponse && evt.body && evt.body.success) {
this.toasterService.success(evt.body.success.message, evt.body.success.title, { positionClass: 'toast-bottom-center' });
}
}),
catchError((err: any) => {
console.log('err')
if (err instanceof HttpErrorResponse) {
try {
this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });
} catch (e) {
this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });
}
//log error
}
return of(err);
}));
}
}
role.service.ts
import { AppHttpInterceptor } from './http.interceptor';
import { Injectable } from '#angular/core';
import { Headers, Http, RequestOptions, Response } from "#angular/http";
import { environment } from '../../environments/environment';
#Injectable()
export class RolesService {
private apiUrl = environment.apiUrl
constructor(private http: Http, private ads: AppHttpInterceptor) { }
getRoles() {
let url = this.apiUrl + '/api/v1/role/all';
return this.http.get(url, this.jwt()).map((response: Response) => {
//console.log('service', response)
// this.ads.displayToast(response.json());
return response;
});
}
}
}
I have added the provider for the hTTp Interceptors in the app module as below
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { ThemeComponent } from './theme/theme.component';
import { LayoutModule } from './theme/layouts/layout.module';
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScriptLoaderService } from "./_services/script-loader.service";
import { ThemeRoutingModule } from "./theme/theme-routing.module";
import { AuthModule } from "./auth/auth.module";
import { SharedService } from './_services/shared.service';
import { ToastrModule } from 'ngx-toastr';
import { AppHttpInterceptor } from './_services/http.interceptor';
#NgModule({
declarations: [
ThemeComponent,
AppComponent
],
imports: [
LayoutModule,
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
ThemeRoutingModule,
AuthModule,
HttpClientModule,
ToastrModule.forRoot({
timeOut: 2000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
autoDismiss: true,
newestOnTop: true,
progressBar: true,
closeButton: true,
tapToDismiss: true
}),
],
providers: [ScriptLoaderService, SharedService,
[{
provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true
}]
],
bootstrap: [AppComponent]
})
export class AppModule { }
I try to import storage mdule in my ionic project. but when i add providers Storage, The erro is changed. The error become 'can't resolved storege all : (?)'
How can i solve this error? can you help me please?
I wrote my codes below.
I watch this video :https://www.youtube.com/watch?v=h_IhS8QQjUA&list=PLNFwX8PVq5q7S-p_7zO99xdauhDsnMPw0&index=17&t=0s
App Module ts:
import { NgModule } 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 {Storage} from '#ionic/storage';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,IonicStorageModule.forRoot()],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Page TS
import { Component, ViewChild } from "#angular/core";
import { StorageService, Item } from "../services/storage.service";
import { Platform, ToastController, IonList } from "#ionic/angular";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage {
items: Item[] = [];
newItem: Item = <Item>{};
#ViewChild("mylist") mylist: IonList;
constructor(
private storageService: StorageService,
private plt: Platform,
private toastController: ToastController
) {
this.plt.ready().then(() => {
this.loadItems();
});
}
loadItems() {
this.storageService.getItems().then(items => {
this.items = items;
});
}
addItem() {
this.newItem.modified = Date.now();
this.newItem.id = Date.now();
this.storageService.addItem(this.newItem).then(item => {
this.newItem = <Item>{};
this.showToast("Item Added");
this.loadItems();
});
}
updateItem(item:Item){
item.title='UPDATED:${item.title}';
item.modified=Date.now();
this.storageService.updateItem(item).then(item=>{
this.showToast("Item Updated");
this.loadItems();
});
}
deleteItem(item:Item){
this.storageService.deleteItem(item.id).then(item=>{
this.showToast("Item Deleted");
this.mylist.closeSlidingItems();
this.loadItems();
});
}
async showToast(msg){
const toast=await this.toastController.create({
message:msg,
duration:2000
});
toast.present();
}
}
Service
import { Injectable } from '#angular/core';
export interface Item{
id:number,
title:string,
value:string,
modified:number
}
const ITEMS_KEY="my-items";
#Injectable({
providedIn: 'root'
})
export class StorageService {
constructor(private storage:Storage) { }
addItem(item:Item):Promise<any>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(items){
items.push(item);
return this.storage.set(ITEMS_KEY,items);
}else{
return this.storage.set(ITEMS_KEY,[item]);
}
});
}
getItems():Promise<Item[]>{
return this.storage.get(ITEMS_KEY);
}
getItem(id:number){
}
updateItem(item:Item):Promise<any>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(!items || items.length==0){
return null;
}
let newItems:Item[]=[];
for (let i of items){
if(i.id==item.id){
newItems.push(item);
}else{
newItems.push(i);
}
}
return this.storage.set(ITEMS_KEY,newItems);
});
}
deleteItem(id:number):Promise<Item>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(!items || items.length==0){
return null;
}
let toKeep:Item[]=[];
for (let i of items){
if(i.id!=id){
toKeep.push(i);
}else{
//newItems.push(i);
}
}
return this.storage.set(ITEMS_KEY,toKeep);
});
}
}
In the StorageService file, you're injecting the storage like this:
constructor(private storage: Storage) { }
but I cannot see the Storage being imported in that file. So the Storage class injected in the constructor refers to the Web Storage API and not to the Ionic's Storage.
To fix that, please import the Storage from #ionic/storage:
import { Storage } from '#ionic/storage';
// ...
#Injectable({
providedIn: 'root'
})
export class StorageService {
constructor(private storage: Storage) { }
// ...
}
installing
npm install #ionic/storage
npm install #ionic/storage-angular
remember create your storage in the service
import { Storage } from '#ionic/storage';
constructor(private storage:Storage){
this.storage.create();
}
and import this in app.module
import { IonicStorageModule } from '#ionic/storage-angular';
import { Storage } from '#ionic/storage';
with storage in your providers
providers: [{ provide: RouteReuseStrategy},Storage],
ionic-storage angular
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);
});
}
}