Language Lab App - but "not a function" error

Told my missus I could quickly write her a language lab app because she cant find what she wants - hear a sentence read out, record yourself and listen to yourself to check pronunciation.

I’ve started with the “list” template. It displays a list of messages - you click and get a new screen with teh message.

For my app the messages are the sentences, you click and get a screen with the sentence, and play buttons. From the “list” template this is the “view-message” module.

Here is html - I’ve just added some icons for play, record etc, Play at the moment

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons>
      <ion-back-button [text]="getBackButtonText()" defaultHref="/"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<!-- If A file name is clicked it goes here - do we need this?-->
<!--ion-content [fullscreen]="true" *ngIf="message"-->
  <ion-content *ngIf="message">
  <ion-item>
    <ion-icon name="person-circle" color="primary"></ion-icon>

  </ion-item><ion-item> {{message.englishText}}
        
          </ion-item>
  <ion-item> {{ message.pinyinChinese}}</ion-item>
          <ion-item>{{ message.simplifiedChinese}}</ion-item>  
           <ion-item> <ion-icon name="play" (click)='errMsg()'></ion-icon>Play the file</ion-item>
           <ion-item><ion-icon name="mic"></ion-icon>Record yourself</ion-item>
           <ion-item> <ion-icon name="play"></ion-icon>Play yourself back</ion-item>
</ion-content>

Here is the .ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ViewMessagePage } from './view-message.page';
import { IonicModule } from '@ionic/angular';
import { ViewMessagePageRoutingModule } from './view-message-routing.module';
import { NativeAudio } from '@ionic-native/native-audio/ngx';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ViewMessagePageRoutingModule
  ],
  declarations: [ViewMessagePage]
})
export class ViewMessagePageModule {

  constructor(private nativeAudio: NativeAudio) {  }
  
  playXino(){
    this.nativeAudio.preloadSimple( 'click', 'assets/1.mp3');
    this.nativeAudio.play('uniqueId1', () => console.log('uniqueId1 is done playing'));   
  }
errMsg() {
   console.log('why is this not a function?');
}
  }

All I’m doing at the moment is clicking the play button to run errMsg(). But it tells me ctx_r1.errMsg is not a function. Can anyone help me see why this is not a function?

Because pages and modules are totally different things. Personally, I think lazy loading is a terrible default for Ionic, and would suggest totally ignoring it and declaring all your pages in a single monolithic AppModule. But, if you want to stick with it, probably good to read the official docs about how it works.

Thanks rapropos. I had an inkling of the problem.