I have a whole page component to add new users to my app, so to do this, I decide to use a modal to register. But I have to do 2 calls in this component: 1- register on Firebase, 2- register on DB. And because of this, my modal closes and the page as well return to last one page, and send me this error on log.
Can anyone help me with this?
register.page.html
<ion-content>
<ion-fab (click)="setOpen('isModalOpen', true)" vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button id="user-modal">
<ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-modal trigger="user-modal">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="cancel()">
<ion-icon name="arrow-back-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Create User</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item class="new-user">
<ion-label position="floating">Email:</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-button (click)="sendUser()">Cadastrar</ion-button>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
register.page.ts
@Component({
selector: 'register-admin',
templateUrl: './register-admin.page.html',
styleUrls: ['./register-admin.page.scss'],
})
export class RegisterPage implements OnInit {
@ViewChild(IonModal) modal: IonModal;
constructor(private userService: UserService) {}
sendUser() {
this.userService.createUser(user)
.then(() => {
this.userService.createUserInfo(user)
.then(() => {
alert('User created!');
this.modal.dismiss(null, 'cancel');
});
}).catch(err => {
if (err.message.includes('already')) {
alert('Already Created');
} else if (err.message.includes('Password')) {
alert('Password have to be more than 6 digits.');
} else {
alert('Try again Later');
}
});
}
user.service.ts
createUser(user) {
return this.fireAuth.createUserWithEmailAndPassword(user.email, user.pass)
}
resetPassword(email: string) {
return this.fireAuth.sendPasswordResetEmail(email);
}
createUserInfo(user: any) {
return this.db.list('/user').push({
name: user.name,
email: user.email,
admin: user.admin === 'true' ? true : false,
type: user.type
});
}
But every time when I call this function, it works, but all close, or worst, it doesn't close and the whole screen is frozen and shows the error on the console:
Uncaught RangeError: Maximum call stack size exceeded.
at focusElement (helpers-eed79a2b.js:158:1)
at focusFirstDescendant (overlays-4fbe89bd.js:4095:17)
at trapShadowFocus (overlays-4fbe89bd.js:4235:7)
at trapKeyboardFocus (overlays-4fbe89bd.js:4252:5)
at HTMLDocument.<anonymous> (overlays-4fbe89bd.js:4261:41)
at ZoneDelegate.invokeTask (zone.js:434:1)
at Zone.runTask (zone.js:205:1)
at ZoneTask.invokeTask [as invoke] (zone.js:516:1)
at invokeTask (zone.js:1656:1)
at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1725:1)
PS: Error can be from focusLastDescendant too
I tried to see if was a kind of problem with the modal focus, to having this kind of error, when closes. But is every time working correctly. Then if 1 use only 1 promise in the call, it's works total fine. I don't know if the rest of the project is influencing this component... But seems to not be, because I have another page almost the same way, but works totally fine, but with only 1 promise call
So... There problem is when I was getting all Users, I was using snapshotChanges(), and that was recalling every change on that route. And the first when I called was with an navCtrl forward, so all this mistaken was made. So I change to valueChange() and seems to work