Thursday, December 10, 2020

'ion-xxx' is not a known element

Today I used Angular CLI to generate a module in my Ionic App. After that, I added some pages to it. They are for a page with tabs. However, after I wired up everything, the tab page doesn't work. It display the tabs, but not at the right place(bottom). It doesn't navigate at all. In the console, it displays "'ion-tabs' is not a known element" error.


It turned out that I have to manually add IonicModule to the import of the module!





[(ngModel)] doesn't work with "no value accessor for form control with name:.."

 I kept getting "no value accessor for form control with name:.." when using [(ngModel)]. I checked everything and followed exact the same code in those user guide, but I still couldn't get around this error. Finally, I found the following discussion. I added ngDefaultControl to the input and solved my issue!

https://stackoverflow.com/questions/46465891/what-is-ngdefaultcontrol-in-angular/46465959



Wednesday, December 9, 2020

Ionic 5: Form doesn't catch the input value

 I was upgrading my Ionic 3 app to Ionic 5. I was basically creating a new blank app and adding everything back in. Yesterday when I was re-creating the SignupPage, I ran into a weird issue. When I hit "create account" button, it didn't catch any input value in the form. Everything is blank. I checked and re-checked my code. Everything looks correct. It turned out to be that I forgot to add SignupPage to the decrlarations of in the module!!! 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [
    LoginPage,
    SignupPage
  ]
})

Saturday, December 5, 2020

NullPointerException when accessing external storage

 Recently, after changing the target platform to Android Q, we suddenly got "java.lang.NullPointerException" when accessing external storage in our app. It turned out that was due to the scoped storage change in Android Q.

For now, we have to add the following line in the AndroidManifest.xml to opt it out. But it seems that we won't be able to do that once we target Android R.

android:requestLegacyExternalStorage="true"

You can find more info on Android.com or here.