grunt error TS1005: missing semicolon

Question

grunt error TS1005: missing semicolon

Currently, I am working with Angular and TypeScript to interact with a REST webservice. Since I am still new to TypeScript, my issue might be basic or my approach could be incorrect. The problem I am facing is receiving an error TS1005: ';' expected when compiling my exampleController.ts using Grunt. I have already researched for a solution but unfortunately, I have not come across anything that has been helpful. In my code, I am already utilizing

import angular = require('angular');

Here is a snippet of my controller code:

class ExampleComponentController {

public static $inject = [
  '$scope',
  'productRestService',
  '$http'
];

$scope.submit = function(form) {

    var config = {
        'username' : $scope.name,
        'password' : $scope.pass
    };

    var $promise = $http.post('requat_url', config)
        .success(function(data, status, headers, config) {
            ...
        })
        .error(function(data, status, headers, config) {
            ...
        });
}; 

constructor(...) {...} 
}

The error occurs on the line where $scope.submit is defined. Any advice would be greatly appreciated.

angularjs gruntjs typescript

Answer 1

Answer №1

To ensure proper functionality, the $scope.submit... code snippet should be located within the constructor. Additionally, the constructor parameters must align with the elements listed in the $inject array:

class ExampleComponentController {
  public static $inject = [
    '$scope',
    'productRestService',
    '$http'
  ];

  constructor($scope, productRestService, $http) {
    $scope.submit = function (form) {

      var config = {
        'username': $scope.name,
        'password': $scope.pass
      };

      var $promise = $http.post('requat_url', config)
        .success(function (data, status, headers, config) {
        })
        .error(function (data, status, headers, config) {
        });
    };
  }
}

Answer 2

To ensure proper functionality, the $scope.submit... code snippet should be located within the constructor. Additionally, the constructor parameters must align with the elements listed in the $inject array:

class ExampleComponentController {
  public static $inject = [
    '$scope',
    'productRestService',
    '$http'
  ];

  constructor($scope, productRestService, $http) {
    $scope.submit = function (form) {

      var config = {
        'username': $scope.name,
        'password': $scope.pass
      };

      var $promise = $http.post('requat_url', config)
        .success(function (data, status, headers, config) {
        })
        .error(function (data, status, headers, config) {
        });
    };
  }
}

grunt error TS1005: missing semicolon

Answer №1

Similar questions

Is there a way to create numerous div elements in real-time when a click event occurs?

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

"Render Failure" JavaScript and CSS files

Is there a way to operate both websocket and http methods concurrently on a server in Typescript?

How can I manage the transfer of items between lists in angular-ui sortable?

What is the best method to retrieve a JSON record by its specific ID using Angular's AJAX functionalities?

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

typescript scrolling location

React and Redux - "Plain objects are required for actions"

Tips on invoking a child component's function from the parent component

Looking to implement a feature in Angular 2 where content on a page can be filtered based on a single array property of the user

Mastering the Art of Utilizing AngularJS to Harness the Power of Keypress and

allowChoosing and uiGridEnums

There seems to be a malfunction with the hide and reset features, as they are

Obtain non-numeric parameters from the URL in Angular 2 by subscribing to

Angular directives enable the addition of DOM elements using ng functions

A guide on utilizing server-based data grouping and showcasing it in ag-grid within an angular environment

Utilizing the Literal Form of a Generic Object Parameter

What is the recommended approach for sending a null value to a mandatory property in a Vue.js component?

In React Native, a scenario occurs where multiple records are added to an array after the second object is pushed onto it