Runtime Error in Ionic App

Question

SimonIoa 77 Master Poster

6 Years Ago

Hello, i am trying to do an Ionic app and i am getting an error. Any suggestion?

Runtime error
this.file.documentsDirectory is null

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Sound Recorder & Player
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-content>
      <ion-card-title>
        <button ion-button primary (click)="stopRecord()" *ngIf="recording"><ion-icon name="mic-off"></ion-icon>&nbsp;&nbsp;Stop Record</button>
        <button ion-button primary (click)="startRecord()" *ngIf="!recording"><ion-icon name="mic"></ion-icon>&nbsp;&nbsp;Start Record</button>
      </ion-card-title>
    </ion-card-content>
  </ion-card>
  <ion-list>
    <ion-item *ngFor="let audio of audioList; index as i;">
      <p>{{audio.filename}}</p>
      <button ion-button clear item-end large (click)="playAudio(audio.filename, i)"><ion-icon name="play"></ion-icon></button>
    </ion-item>
  </ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

constructor(public navCtrl: NavController,
  private media: Media,
  private file: File,
  public platform: Platform) {}

  recording: boolean = false;
filePath: string;
fileName: string;
audio: MediaObject;
audioList: any[] = [];

getAudioList() {
  if(localStorage.getItem("audiolist")) {
    this.audioList = JSON.parse(localStorage.getItem("audiolist"));
    console.log(this.audioList);
  }
}

ionViewWillEnter() {
  this.getAudioList();
}

startRecord() {
  if (this.platform.is('ios')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.startRecord();
  this.recording = true;
}

stopRecord() {
  this.audio.stopRecord();
  let data = { filename: this.fileName };
  this.audioList.push(data);
  localStorage.setItem("audiolist", JSON.stringify(this.audioList));
  this.recording = false;
  this.getAudioList();
}

playAudio(file,idx) {
  if (this.platform.is('ios')) {
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.play();
  this.audio.setVolume(0.8);
}

}

android ionic mobile

Edited 6 Years Ago by SimonIoa

2 Contributors
6 Replies
2K Views
4 Days Discussion Span
Latest Post 6 Years Ago Latest Post by SimonIoa

All 6 Replies

rproffitt 2,572 "Nothing to see here."

6 Years Ago

Put debug lines prior to 38 and 60 to output this.file.documentsDirectory so you can see what's there. Then go back line by line to see what your code did to fill in the variable.

rproffitt 2,572 "Nothing to see here."

6 Years Ago

It sounds like you need to get back to Ionic support. Also the install command you shared doesn't match what I read at
https://www.npmjs.com/package/@ionic-native/core

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

SimonIoa 77 Master Poster · Answer 1 · 2017-12-23T11:30:56+00:00

After i perform npm install --save @ionic-native/media on C:\Windows\System32\ionic-sound i am getting an error that i have dependencies manually i do but the same error prompts. I look on package.json and angular.core is installed, also ionic/native@core is installed and rxjs too. I installed npm from the beggining that didn't solved it too

npm WARN @ionic-native/media@4.5.2 requires a peer of ionic-native/core4.2.0 but none is installed
npm WARN @ionic-native/media@4.5.2 requires a peer of @angular/core but none is installed
npm WARN @ionic-native/media@4.5.2 requires a peer of rxjs@5.0.1 but none is installed

SimonIoa 77 Master Poster · Answer 2 · 2017-12-24T17:36:47+00:00

Thanks @rproffitt but i did that like a hundred times. i have updated node.js also but i am getting an error to install rxjs.5.0.1 , i have 5.5.0 installed. Tried to install 5.1.0 but couldn't

rproffitt 2,572 "Nothing to see here." Moderator · Answer 3 · 2017-12-24T21:17:21+00:00

Now you make me worry that Ionic has blown their installer up. Get to the authors there and ask what's going on.

SimonIoa 77 Master Poster · Answer 4 · 2017-12-25T13:54:39+00:00

I never thought there was a problem with the framework.

Now i am getting an error this.audio is undefined

ERROR 
TypeError: this.audio is undefined
Stack trace:
[196]/HomePage.prototype.startRecord@http://localhost:8100/build/main.js:88:9
View_HomePage_2/<@ng:///AppModule/HomePage.ngfactory.js:36:19
handleEvent@http://localhost:8100/build/vendor.js:13608:132
callWithDebugContext@http://localhost:8100/build/vendor.js:15093:39
debugHandleEvent@http://localhost:8100/build/vendor.js:14680:12
dispatchEvent@http://localhost:8100/build/vendor.js:10057:16
renderEventHandlerClosure/<@http://localhost:8100/build/vendor.js:10671:38
decoratePreventDefault/<@http://localhost:8100/build/vendor.js:36353:53
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:4973:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16787
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:27893
HomePage.html:27:8
ERROR CONTEXT 
{…}
elDef: Object { nodeIndex: 0, bindingIndex: 0, outputIndex: 0, … }
elView: Object { def: {…}, parent: {…}, state: 12, … }
nodeDef: Object { nodeIndex: 0, bindingIndex: 0, outputIndex: 0, … }
nodeIndex: 0
view: Object { def: {…}, parent: {…}, state: 12, … }
__proto__: Object { elOrCompView: Getter, injector: Getter, component: Getter, … }

home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

recording: boolean = false;
filePath: string;
fileName: string;
audio: MediaObject;
audioList: any[] = [];

  constructor(public navCtrl: NavController,
  private media: Media,
  private file: File,
  public platform: Platform) {}

  getAudioList() {
  if(localStorage.getItem("audiolist")) {
    this.audioList = JSON.parse(localStorage.getItem("audiolist"));
    console.log(this.audioList);
  }
}

ionViewWillEnter() {
  this.getAudioList();
}

startRecord() {
  if (this.platform.is('ios')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.startRecord();
  this.recording = true;
}

stopRecord() {
  this.audio.stopRecord();
  let data = { filename: this.fileName };
  this.audioList.push(data);
  localStorage.setItem("audiolist", JSON.stringify(this.audioList));
  this.recording = false;
  this.getAudioList();
}

playAudio(file,idx) {
  if (this.platform.is('ios')) {
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.play();
  this.audio.setVolume(0.8);
}

}

Runtime Error in Ionic App

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers