TS1128, TS1005 errors in Ionic Camera Example

Ionic Framework Ionic Angular
1

Hi, I’m new to Ionic & working through the Ionic Angular Camera app example after running ‘ionic serve’ I get the following Typescript errors. I copy/pasted the example code from the web page to the already existing folders so it looks to me like the error is during compilation… any ideas?

Error:

ERROR in src/app/services/photo.service.ts:6:1 - error TS1128: Declaration or statement expected.
[ng] 6 public async addNewToGallery() {
[ng] ~~~~~~
[ng] src/app/services/photo.service.ts:6:14 - error TS1005: ‘;’ expected.
[ng] 6 public async addNewToGallery() {
[ng] ~~~~~~~~~~~~~~~
[ng] src/app/services/photo.service.ts:6:32 - error TS1005: ‘;’ expected.
[ng] 6 public async addNewToGallery() {
[ng] ~
[ng] src/app/tab2/tab2.page.ts:3:20 - error TS1005: ‘,’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~~~~~~~~~~~~
[ng] src/app/tab2/tab2.page.ts:3:32 - error TS1005: ‘,’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~
[ng] src/app/tab2/tab2.page.ts:3:48 - error TS1005: ‘;’ expected.
[ng] 3 constructor(public photoService: PhotoService) { }
[ng] ~
[ng]

My code, src/app/services/photo.service.ts

import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, 
  CameraPhoto, CameraSource } from '@capacitor/core';

const { Camera, Filesystem, Storage } = Plugins;

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri, 
    source: CameraSource.Camera, 
    quality: 100 
  });
}

My code, src/app/tab2/tab2.page.ts:

import { PhotoService } from '../services/photo.service';

constructor(public photoService: PhotoService) { }
1 Like
2

This is probably a super-stupid question, but is that really the entirety of photo.service.ts? That is, is addNewToGallery() a naked function hanging in the breeze like that, or is it really part of a PhotoService class in real life?

3

I have the very same problem.

Regarding your question — no it is also mentioned in html file later as:
<ion-fab-button (click)="photoService.addNewToGallery()">

That step of tutorial is here — https://ionicframework.com/docs/angular/your-first-app/2-taking-photos

4

Try This …

import { Injectable } from ‘@angular/core’;
import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, CameraPhoto, CameraSource } from ‘@capacitor/core’;
const { Camera, Filesystem, Storage } = Plugins;
@Injectable({
providedIn: ‘root’
})
export class PhotoService {

constructor() { }

public async addNewToGallery() {
    // Take a photo
    const capturedPhoto = await Camera.getPhoto({
        resultType: CameraResultType.Uri, 
        source: CameraSource.Camera, 
        quality: 100 
    });
}

}

2 Likes
5

^^ Perfect this solved the issue! Thanks, the tutorial does not do a good job telling you where these new bits of code go exactly in the file.