I guess you are right. I am little too frustrated about this. In my defense, I am under a lot of pressure to release this app and this bug is not helping a bit. Here are my tsconfig files and the files involved in the problem. In the mean time, I will try to find a workaround.
Ionic is a great product and It had helped me a lot to deliver great solutions to my customers. It just frustrate me the level of disregard about backward compatibility that reigns these days, not just with Ionic, but almost every framework out there; I am not used to that.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}
repairs.module.ts
Here is where I call the modal that is failing.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { RepairsPage } from './repairs.page';
import { RepairPage } from '../repair/repair.page';
import { ComponentsModule } from '../../components/components.module';
const routes: Routes = [
{
path: '',
component: RepairsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ComponentsModule,
RouterModule.forChild(routes)
],
declarations: [
RepairsPage,
RepairPage
],
entryComponents: [
RepairsPage,
RepairPage
]
})
export class RepairsPageModule {}
repairs.page.ts
Here is the code that invokes the modal:
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { ModalController } from '@ionic/angular';
import { AppService } from '../../services/app.service';
import { UIService } from '../../services/ui.service';
import { RepairPage } from '../repair/repair.page';
@Component({
selector: 'app-repair',
templateUrl: './repairs.page.html',
styleUrls: ['./repairs.page.scss'],
})
export class RepairsPage implements OnInit {
...
/**
* @method Add
* Incluir una nueva reparacion
*/
async Add() {
const modal = await this.modal.create({
component: RepairPage,
componentProps: {
tipo: "(seleccione)",
notas: "",
nuevo: true
}
});
const handleModal = (res:any, $this:any) => {
if (res && res.data && !res.data.cancelado) {
$this.reparaciones.push(res.data.repair);
}
}
modal.onWillDismiss()
.then(res => handleModal(res, this));
await modal.present();
} // Add
}
repair.module.ts
This is the modal page that is failing
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { RepairPage } from './repair.page';
const routes: Routes = [
{
path: '',
component: RepairPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: []
})
export class RepairPageModule {}
repair.page.ts
import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { UIService } from '../../services/ui.service';
@Component({
selector: 'app-repair',
templateUrl: './repair.page.html',
styleUrls: ['./repair.page.scss'],
})
export class RepairPage implements OnInit {
tipo:string;
@Input() notas:string;
nuevo:boolean;
@ViewChild("edtNotas", {static: true}) edtNotas;
constructor(
private modal: ModalController,
private ui: UIService
) {
this.tipo = "(seleccione)";
this.notas = "";
this.nuevo = true;
}
ngOnInit() {
}
ionViewDidEnter() {
if (!this.nuevo) this.focusNotas();
}
close() {
let data = {
repair: null,
eliminar: false,
cancelado: true
}
this.modal.dismiss(data);
}
async repairTypePicker() {
//let options = ["Motor", "Caja", "Tren Delantero", "Latonería", "Pintura", "Otros", "No sabe"];
let options = ["Motor", "Transmision", "Direccion", "Aire Acondicionado", "Pintura", "Otros", "No sabe"]; // Cambio solicitado por Orlando Torres, Ene 8, 2020
let repairType:any = await this.ui.presentPickerDialog(options);
if (!repairType) return;
this.tipo = repairType;
this.focusNotas();
} // repairTypePicker
save() {
let data = {
repair: {
tipo: this.tipo.toUpperCase(),
notas: this.notas
},
eliminar: false,
cancelado: false
}
if (this.tipo == "(seleccione)") {
this.ui.presentToast("Debe seleccionar el tipo de reparacion");
return;
}
if (this.notas == "") {
this.ui.presentToast("Debe indicar la descripcion del trabajo requerido");
return;
}
this.modal.dismiss(data);
} // save
async remove() {
let confirmed = await this.ui.presentConfirmDialog("Descartar esta reparación?");
if (!confirmed) return;
let data = {
repair: null,
eliminar: true,
cancelado: false
}
this.modal.dismiss(data);
} // remove
private focusNotas() {
setTimeout(() => {
this.edtNotas.setFocus();
}, 500);
}
}
