Typescript - Code fails to build from error TS1128: Declaration or Statement expected, but runs as expected when I serve the code

Question

I am developing an Angular2 project, and I created a class that serves as my main Component class:

import { Component, OnInit} from '@angular/core';

import { submitService } from './Common-functions/submit.service';

@Component({
selector: 'my-app',
template: `htmlCode`

})
export class AppComponent implements OnInit{ 
  hideTable = true;
  lengthOfRecords = 0;
  lowerLimit = 0;
  upperLimit = 5;
  prevButtonDisabled = true;
  nextButtonDisabled = false;

  //User inputs

constructor(private sService:submitService) { }

ngOnInit() {
    public submitToJSON() {

         //SumbitJSON Object
            var submitJSON = {
                //inputData 
                     };

            this.sService.POST(submitJSON);
     }


   public returnDetails() {

    this.listOfIDs = {//ListData};

            this.hideTable = false;
        var keys = Object.keys(this.listOfIDs);
            var len = keys.length;
            this.lengthOfRecords = len;
        }

    public prev() {
            if(this.lowerLimit <= 0) {
                ;
                }
            else {
                this.lowerLimit = this.lowerLimit - 6;
                this.upperLimit = this.upperLimit - 5;
                this.nextButtonDisabled = false;
                if(this.lowerLimit <= 0) {
                    this.prevButtonDisabled = true;
                    }
                }
            }
   public next() {
            if(this.upperLimit >= this.lengthOfRecords) {
                ;
                }
            else {
                this.lowerLimit = this.lowerLimit + 6;
                this.upperLimit = this.upperLimit + 5;
                this.prevButtonDisabled = false;
                if(this.upperLimit >= this.lengthOfRecords) {
                    this.nextButtonDisabled = true;
                    }
                }
            }

 getEntries(obj, from, to) {
        if(obj!=null) {
            var entries = [];
            for(var key in obj) {
                // extract index after `app`
                var index = key.substring(3);
                if(index >= from && index <= to) {
                    entries.push( obj[key]);
                }
            }
            return entries;
            }

 }

}

When I run npm start (which will run tsc -p ./), I get the following two errors:

app.appComponent.ts: error TS1128:Declaration or statement expected
app.appComponent.ts: error TS1128:Declaration or statement expected

At the following lines of code

---> public submitToJSON() {

     //SumbitJSON Object
        var submitJSON = {
            //inputData };

        this.sService.POST(submitJSON);
 }

And at the last line of the code. I have been modifying the code the whole day, and only removing the OnInit related code fixes it. What am I doing wrong? I'm new to Angular2, so any information would be helpful. I am also running tsc version 3.1

Solution 1

You have commented

//inputData };

I think the curly brace should be on the next line...

//inputData
};

Edit

Your ngOnInit function should not contain other functions:

import { Component, OnInit} from '@angular/core';

import { submitService } from './Common-functions/submit.service';

@Component({
selector: 'my-app',
template: `htmlCode`

})
export class AppComponent implements OnInit{ 
  hideTable = true;
  lengthOfRecords = 0;
  lowerLimit = 0;
  upperLimit = 5;
  prevButtonDisabled = true;
  nextButtonDisabled = false;

  //User inputs

constructor(private sService:submitService) { }

ngOnInit() {
    // Add any initialization code here
}

submitToJSON() {

     //SumbitJSON Object
        var submitJSON = {
            //inputData 
                 };

        this.sService.POST(submitJSON);
 }


returnDetails() {

this.listOfIDs = {//ListData};

        this.hideTable = false;
    var keys = Object.keys(this.listOfIDs);
        var len = keys.length;
        this.lengthOfRecords = len;
    }

prev() {
        if(this.lowerLimit <= 0) {
            ;
            }
        else {
            this.lowerLimit = this.lowerLimit - 6;
            this.upperLimit = this.upperLimit - 5;
            this.nextButtonDisabled = false;
            if(this.lowerLimit <= 0) {
                this.prevButtonDisabled = true;
                }
            }
        }
next() {
        if(this.upperLimit >= this.lengthOfRecords) {
            ;
            }
        else {
            this.lowerLimit = this.lowerLimit + 6;
            this.upperLimit = this.upperLimit + 5;
            this.prevButtonDisabled = false;
            if(this.upperLimit >= this.lengthOfRecords) {
                this.nextButtonDisabled = true;
                }
            }
        }

 getEntries(obj, from, to) {
    if(obj!=null) {
        var entries = [];
        for(var key in obj) {
            // extract index after `app`
            var index = key.substring(3);
            if(index >= from && index <= to) {
                entries.push( obj[key]);
            }
        }
        return entries;
        }



}

Solution 2

In my case was just necessary to compile again the project

Solution 3

Just had the same error and it went away after closing IntelliJ and reopening. I had been modifying the file with the error. It is like it was looking at an old version somehow.

Solution 4

In Visual Studio code I had to kill npm start and then run again

npm run start

View more solutions

Comments

[user3334871]

Hi! Sorry, I did that when I posted to StackOverflow, just to not be too verbose. The code has the curly bracket on the next line. I'll fix it

[birwin]

The ngOnInit function should not contain other functions. I have updated my response to include what I believe your ngOnInit should be.

[user3334871]

Thanks, that did help! I guess I didn't fully understand the OnInit tutorial. However, when I try to build the code now, I get the message "error TS2346: Supplied parameters do not match any signature of call target". Does this mean I am not creating my object of class submitService correctly?

[user3334871]

Actually, I figured that one out, and it was a silly mistake! I'll mark this as the answer, as it fixed my issue :)

[Dima Dorogonov]

My WebStorm also was fixed after reopening. Thanks

[willem]

Same thing on Webstorm (also a Jetbrains product). Didn't expect a restart would do the trick, but it did! Thanks :)