How to disable custom Angular/Ionic page transitions when not using a mobile device

Question

I have an Angular/Ionic application that can run both on native and web (iPhone, Android, and Web). I set up a custom page transition animation, which looks good on mobile but weird on a large screen like on desktop, so I would like to disable these animations and have traditional page loading like you would see on a normal website.

My app.module imports contains the following line, overriding the traditional sliding animation:

IonicModule.forRoot({
  navAnimation: myTransitionAnimation
}),

I am aware of Platform and how I can use it to identify what the app is currently running on like so:

this.platform.is('mobile') but doing this is only available in an app.component.ts not in the app.module.ts...right?

So basically my question is how to best do the following in my app.module.ts (pseudo code)

IonicModule.forRoot({
    if(isMobileDevice) {
        navAnimation: myTransitionAnimation
    } else {
        animated: false //the key/value to disable transition animations
    }
}),

Answer 1

I did it like this to disable page animations (in web and phone):

import { Animation } from '@ionic/core'
...
IonicModule.forRoot({
      backButtonText: '',
      mode: 'ios',
      navAnimation: (AnimationC: Animation): Promise<Animation> => { return Promise.resolve(new AnimationC()); }
 }),

Then I used this to animate when opening a new page: https://github.com/Telerik-Verified-Plugins/NativePageTransitions

constructor(
    private nav: NavController,
    private transition: NativePageTransitions
  ) { }

  public push(url: string): void {
    this.transition.slide({ direction: 'up', duration: 350 });
    this.nav.navigateForward(url);
  }