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

Answer 1

In my case was just necessary to compile again the project

Answer 2

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.

Answer 3

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



}

Answer 4

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

npm run start

Answer 5

For those who experiencing problems with linter: It often happens with me in WebStorm that some linter error sits there forever. Restarting IDE works as Marshall Thompson suggested, but closing file tab and opening it solves the problem too.

Answer 6

If there is no syntax error and you still see it, try restarting the IDE. (For me the issue was fixed after reopening Webstorm IDE)