Angular threw an error stating that it encountered an unexpected token 'var' when trying to declare a variable x as

Currently facing a challenge with my Angular application development. I have created a TS File that interacts with my API (imported in the index.html using a script tag) and exported some functions from this file to be used in my components. Despite everything working fine, an error keeps popping up in my browser. Surprisingly, IntelliJ is not flagging any errors either. Here's a snippet of my code:

declare var AirConsole:any;

let airconsole: any;

export const enum MessageClass {
  ERROR,
  LOGIN,
ANNOUNCEMENT
}

export function InitAirConsole(){
  airconsole = new AirConsole();
  console.log("Created AirConsole Controller:" );
  console.log(airconsole);

  airconsole.onMessage = function(from:number,data:any){
    switch(data.messageClass){
      case MessageClass.ERROR:
        console.log("Error Code: " + data.errorCode + "\nDetails: " + data.errorDetails);
        break;
      case MessageClass.ANNOUNCEMENT:
        console.log("Announcement from Screen\nHeader: " + data.header + "\nMessage:" + data.message);
        break;
    }
  }
}

export function SendMessageToScreen(data:any){
  airconsole.message(AirConsole.SCREEN, data);
  console.log("Data sent to Screen. Data: ");
  console.log(data);
}

The issue seems to be on line 1 where I am getting

Uncaught SyntaxError: Unexpected token 'var'
https://i.sstatic.net/EaHsT.png

Answer №1

The issue arises from the inclusion of my ts file in the scripts array of my angular.json configuration. This resulted in the TypeScript code being included in my script.js. Once I removed it from the script array, the problem was resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the md-menu options to not be injected into my hybrid Angular application?

I am currently troubleshooting an issue in my hybrid Angular/AngularJS application that arises upon reloading. To see a demonstration of this issue, visit this StackBlitz link. The approach I am using to bootstrap AngularJS within an Angular app is largely ...

Can an EJS variable be transferred to an Angular ng-repeat filter?

I am currently working on a profile page where I need to display a user's name in plain text using <%= user.local.name %>. This requires querying the database through Mongoose. My issue now is figuring out how to pass that value to an Angular ng ...

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

Initialization of Arrays with Default Values

I have taken on the task of converting a C++ program into JavaScript. In C++, when creating a dynamic array of type float/double, the entries are automatically initialized to 0.0; there is no need for explicit initialization. For example, a 1-D vector of ...

Enhanced Search and Replace Techniques in HTML using jQuery and JavaScript

Although I have some experience with jQuery and Javascript, I am by no means an expert. I have been struggling to find a way to achieve my goal using minimal resources. Maybe you can assist me: This is what I am trying to accomplish: I would like to use ...

Trigger the browser to refresh translation files following the deployment

Our Angular/Ionic app utilizes the ngx-translate/core package for translations, and is hosted on Firebase. With each new build and deployment, Angular automatically creates a hash for our js files to ensure the browser fetches the latest version when chang ...

On iOS devices, the confirm/cancel alert box in Ionic v3 does not display in the center as expected

Encountering an issue with Ionic v3 where the alert box appears at the top only when a text box is included within it. This behavior is observed on regular devices like iPhones, but functions correctly on Android devices. Other form elements like checkboxe ...

Having trouble using angular.isString in conjunction with ng-repeat

Is there a way to use angular.isString for comparison within an ng-if in an ng-repeat loop? Currently, all items in the array are being returned. I attempted to simply display the result of angular.isString, but no output is generated. This is my desired ...

Invoke a CoffeeScript function within a jQuery function

Two files are causing me trouble: one is written in plain jQuery, and the other is a Coffeescript The jQuery file looks like this: $(document).ready(function(){ checkPrice(); }); In comparison, the CoffeeScript file appears as follows: $ -> c ...

Karma's connection was lost due to a lack of communication within 10000 milliseconds

The Karma test suite is encountering issues with the following message: Disconnected, because no message in 10000 ms. The tests are not running properly. "@angular/core": "7.1.3", "jasmine-core": "3.3.0", "karma-jasmine": "1.1.2", The failure seems t ...

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

Do I need to utilize getStaticProps along with JSON imports in Next.js?

Is it necessary to use getStaticProps in order to render static data from a JSON or typescript file, or can the data be imported without using getStaticProps? The documentation I read didn't provide a clear answer. projects.tsx const projects: [ { ...

Stop unauthorized access to specific pages on ionic platform unless the user is logged in

I have a scenario where I want to redirect users from the welcome page (welcome.page.ts) when they click on the login button. If they are already logged in, they should be redirected to the home page (home.page.html). Below is the code snippet from my welc ...

Tips for preventing a Wistia video from playing in a tab when moving away from the tab

Hey everyone, I'm facing an issue with a jsp page that contains multiple tabs. One of the tabs has a wistia video embedded in it. In Firefox and Chrome, when I switch away from the video tab, the video stops playing as expected. However, in Internet ...

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

I recently upgraded my Node to version 16 and since then I have been encountering this issue while building my Angular app. Warning: The folder mapping "./" used in the "exports" field of the package located at ".../node_modules/postcss/package.json" is de ...

Using the map function to iterate over an array of objects retrieved from GetStaticProps in NextJS

Currently, I am working on a mdx blog within the NextJS framework. To achieve this, I have implemented a function called getPostDataByCategory(category) in posts.js located under lib. This function is responsible for filtering posts based on categories. ge ...

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

Forward the request from Node.js to a Spring Boot service and return a response

Currently, I have an angular UI running on localhost:4200, a node server running on localhost:4000, and a spring boot service running on localhost:8080. My goal is to establish a flow from angular to node, then redirect to the spring boot service which co ...

Set up a single array containing multiple objects in a table, each with its own unique set of keys

I am currently developing an application that retrieves data from one or multiple databases, each with different names and varying numbers of columns. The goal is to consolidate this data into a single report screen and export it as a table. While the tabl ...

Determine if an object hierarchy possesses a specified attribute

When passing a set of options as an object like this: var options={ sortRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], filterRules:[ {...}, // rule 1 {...}, // rule 2 // etc. ], etc ...