Cannot find name 'constructor'

Hi, i’m new to Ionic Framework and i’m trying to figure out the ‘Taking Photos with the Camera(Taking Photos with the Camera - Ionic Documentation)’ tutorial. However i’m getting Cannot find name ‘constructor’ error after completing these two steps. Screenshot from 2021-02-15 12-24-20|525x500
I also looked on the forums and found this: TS1128, TS1005 errors in Ionic Camera Example - #3 by sashas
But also this didn’t solve my problem too.
Here are the necessary files;

*~/src/app/tab2/tab2.page.ts

  • ~/photo-gallery/src/app/services/photo.service.ts

  • Error

  • Terminal
    [ng] Error: src/app/services/photo.service.ts:8:2 - error TS2345: Argument of type ‘{ provideIn: string; }’ is not assignable to parameter of type ‘({ providedIn: “root” | Type | “platform” | “any”; } & ValueSansProvider) | ({ providedIn: “root” | Type | “platform” | “any”; } & ExistingSansProvider) | ({ …; } & StaticClassSansProvider) | ({ …; } & ConstructorSansProvider) | ({ …; } & FactorySansProvider) | ({ …; } & ClassSansProvider)’.
    [ng] Object literal may only specify known properties, but ‘provideIn’ does not exist in type ‘({ providedIn: “root” | Type | “platform” | “any”; } & ValueSansProvider) | ({ providedIn: “root” | Type | “platform” | “any”; } & ExistingSansProvider) | ({ …; } & StaticClassSansProvider) | ({ …; } & ConstructorSansProvider) | ({ …; } & FactorySansProvider) | ({ …; } & ClassSansProvider)’. Did you mean to write ‘providedIn’?
    [ng] 8 provideIn:‘root’
    [ng] ~~~~~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:1 - error TS2304: Cannot find name ‘constructor’.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:13 - error TS2304: Cannot find name ‘public’.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:20 - error TS1005: ‘,’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:20 - error TS2552: Cannot find name ‘photoService’. Did you mean ‘PhotoService’?
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:32 - error TS1005: ‘,’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:4:48 - error TS1005: ‘;’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:5:1 - error TS2304: Cannot find name ‘addPhotoToGallery’.
    [ng] 5 addPhotoToGallery() {
    [ng] ~~~~~~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:5:21 - error TS1005: ‘;’ expected.
    [ng] 5 addPhotoToGallery() {
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:6:3 - error TS2532: Object is possibly ‘undefined’.
    [ng] 6 this.photoService.addNewToGallery();
    [ng] ~~~~
    [ng] Error: ./src/app/tab2/tab2.page.ts 6:12
    [ng] Module parse failed: The keyword ‘public’ is reserved (6:12)
    [ng] File was processed with these loaders:
    [ng] * ./node_modules/@ngtools/webpack/src/ivy/index.js
    [ng] You may need an additional loader to handle the result of these loaders.
    [ng] | import { Component } from ‘@angular/core’;
    [ng] | import { PhotoService } from ‘…/services/photo.service’;
    [ng] > constructor(public, photoService, PhotoService);
    [ng] | { }
    [ng] | addPhotoToGallery();
    [ng] - Generating browser application bundles…
    [ng] :heavy_check_mark: Browser application bundle generation complete.
    [ng] 74 unchanged chunks
    [ng] Build at: 2021-02-15T09:20:59.239Z - Hash: a29fea4608f5898f1e80 - Time: 620ms
    [ng] Error: src/app/tab2/tab2.page.ts:4:1 - error TS2304: Cannot find name ‘constructor’.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:13 - error TS2304: Cannot find name ‘public’.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:20 - error TS1005: ‘,’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:20 - error TS2552: Cannot find name ‘photoService’. Did you mean ‘PhotoService’?
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:4:32 - error TS1005: ‘,’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:4:48 - error TS1005: ‘;’ expected.
    [ng] 4 constructor(public photoService: PhotoService) { }
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:5:1 - error TS2304: Cannot find name ‘addPhotoToGallery’.
    [ng] 5 addPhotoToGallery() {
    [ng] ~~~~~~~~~~~~~~~~~
    [ng] Error: src/app/tab2/tab2.page.ts:5:21 - error TS1005: ‘;’ expected.
    [ng] 5 addPhotoToGallery() {
    [ng] ~
    [ng] Error: src/app/tab2/tab2.page.ts:6:3 - error TS2532: Object is possibly ‘undefined’.
    [ng] 6 this.photoService.addNewToGallery();
    [ng] ~~~~
    [ng] Error: ./src/app/tab2/tab2.page.ts 6:12
    [ng] Module parse failed: The keyword ‘public’ is reserved (6:12)
    [ng] File was processed with these loaders:
    [ng] * ./node_modules/@ngtools/webpack/src/ivy/index.js
    [ng] You may need an additional loader to handle the result of these loaders.
    [ng] | import { Component } from ‘@angular/core’;
    [ng] | import { PhotoService } from ‘…/services/photo.service’;
    [ng] > constructor(public, photoService, PhotoService);
    [ng] | { }
    [ng] | addPhotoToGallery();

Constructor on line four and the method below is unknown because they are positioned in the wrong spot.

They need to be part of the class deinition

This is angular stuff. Check the Tour of Heroes tutorial on angular.io so you get a basic understanding on doing angular the right way.

Especially the part on services and components

Thanks for your reply. I’m trying to figure out how things are working. That’s why i searched for tutorials and there is no such different step than in the tutorial. Isn’t that something to be clarified? I mean if tutorial is missing something and there is no conversation about it on the forums, what are we trying to accomplish by searching on the internet.

Hi
Understood. There are many moving parts if it comes to these technologies. And there are many options, making you stray on the wrong path now and the future.

You are dealing with angular technology (with typescript and js under the hood) and the way it works is best to be found on angular.io.