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

Runtime error
this.file.documentsDirectory is null

[194]/HomePage.prototype.startRecord@http://localhost:8100/build/main.js:80:13
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

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);
}

}

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.

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

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

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

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);
}

}
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.