Why am I getting "GoogleAuth does not have web implementation" error

 After adding the capacitor plugin for Google Sign In in my Ionic project, I kept getting "GoogleAuth does not have web implementation." error when test it in the web browser. It turned out that I didn't register the plug in.

'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

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

  ]

})

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.

error TS2484: Export declaration conflicts with exported declaration of 'JSX'.

Today, due to the performance issue I am having with my ionic/firebase mobile app, I decided to upgrade from ionic 4 to ionic 5. I was feeling lucky, so I just ran the following command and hoped everything just works.

npm i @ionic/angular@latest –save

Of cause it didn’t just work. When I tried to compile my app, I got the error in the title. I searched around and didn’t find anything. But I suspect it has something to do with my Angular being outdated. So I found this upgrade guide. I ran the following command in sequence and updated Angular. It fixed the issue!

npm install -g @angular/cli

ng update @angular/cli@8 @angular/core@8 --allow-dirty

The popup has been closed by the user before finalizing the operation.

I am working on my Ionic/Firebase mobile app. Suddenly I couldn’t login using Google Sign-In. It would close the sign in window and throw this error in the console. It turned out that has something to do with the Chrome settings in Incognito mode. So I guess I won’t be using Incognito mode for now. You can see more discussion here.