Help with First App

Ionic Framework
1

I am struggling with the first app “photo-gallery” and would love some help!

import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Storage } from '@capacitor/storage';

public async addNewToGallery(){
  let capturedPhoto: Photo;
  capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });
}

@Injectable({
  providedIn: 'root'
})

export class PhotoService {

  constructor() { }
}

My error I keep getting is this:
Error: src/app/services/photo.service.ts:6:1 - error TS1128: Declaration or statement expected.

6 public async addNewToGallery(){


Error: src/app/services/photo.service.ts:6:8 - error TS2304: Cannot find name 'async'.

6 public async addNewToGallery(){
       ~~~~~

Error: src/app/services/photo.service.ts:6:14 - error TS1005: ';' expected.

6 public async addNewToGallery(){
             ~~~~~~~~~~~~~~~

Error: src/app/services/photo.service.ts:6:14 - error TS2304: Cannot find name 'addNewToGallery'.

6 public async addNewToGallery(){
             ~~~~~~~~~~~~~~~

Error: src/app/services/photo.service.ts:6:31 - error TS1005: ';' expected.

6 public async addNewToGallery(){
                              ~
Error: src/app/tab2/tab2.page.ts:14:23 - error TS2339: Property 'addNewToGallery' does not exist on type 'PhotoService'.

14     this.photoService.addNewToGallery();

_________________________________________________

I've done everything pretty much cut and paste from the tutorial. Any thoughts?
1 Like
2

Perhaps the Tour of Heroes will give you some more grounding in the fundamentals.

This appears to be an orphaned method. It probably wants to be inside the definition of PhotoService. It also isn’t returning anything or declaring a return type.

3

I’m having the same issue. seems the documentation is expecting user to have some previous experience with some frameworks. I just wanted to taste how to create a new app with Ionic before diving in the details of everything. I think would be helpful if the example showed the source code for each step in the first app tutorial at least.

User may think that the documents are outdated.

UPDATE:
here is the full code for the photo.service.ts and tab2.page.ts files

import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Storage } from '@capacitor/storage';

@Injectable({
  providedIn: 'root'
})
export class PhotoService {
public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });
}


  constructor() { }
}

for tab2.page.ts file

import { Component } from '@angular/core';
import { PhotoService } from '../services/photo.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

    constructor(public photoService: PhotoService) { }
    
    addPhotoToGallery() {
      this.photoService.addNewToGallery();
}

}