Error: Looking for a `module`, `class`, `interface`, `enum`, `import`, or a statement, but found an unexpected token in TypeScript

Currently, I am in the process of diving into TypeScript and Angular. As I write my code down, I encounter various challenges along the way.

**app.ts**
import { LikeComponent } from "./like.component";

let component = new LikeComponent(10,true);
component.onClick();
console.log(`likescount: ${component.likesCount}, isSelect: ${component.isSelected}`);

**like.component.ts**
export class LikeComponent
{
    constructor(public likesCount: number,public isSelected: boolean) {

    }
    onClick() {
        this.likesCount += (this.isSelected) ? 1: -1;
        this.isSelected = !this.isSelected;
    }
}

During this learning journey, I faced an error which presented itself as https://i.sstatic.net/BDcUZ.png

My current folder structure looks like this

https://i.sstatic.net/uYCJJ.png

In an attempt to resolve the issue, I added the following code snippet in tsconfig.js but unfortunately, it did not yield any positive results

    {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Upon executing 'tsc like.component.cs', I encountered an error stating 'cannot run external module unless--module is provided'.

tsc --version : 1.0.3.0

Answer №1

We strongly recommend updating TypeScript to the latest version. Unfortunately, we were unable to locate the specific version 1.0.3.0 that you mentioned. In our tests using version 1.0.0.0 (listed on npm as 1.0.0), which is from 4 years ago, we encountered the same issues. However, when we utilized TypeScript 3.0.3, the code compiled without any problems.

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

When running `ng serve` or `ng build --prod`, the dist folder is not created in an Angular 4 application

I recently completed building an Angular 4 app using angular-cli version 1.0.4 and generated the production build with the command ng build --prod. However, I encountered a problem as the expected dist folder was not created after executing this command. ...

I'm looking to showcase a snippet of my dynamic text in this section, limited to just two lines and ending with three dots, with a "read more" link positioned alongside

I've attempted using the CSS ellipsis property, but it's cutting off the first line. I want to display two lines (or set a max character length if possible). I looked into the 'limit' property in Angular to trim text, but it's not ...

The type 'number | undefined' cannot be assigned to the type 'number'

const initialProgram = { id: 0, studentId : 0, targets : [] } const [program, setProgram] = useState(initialProgram); In one of my functions I am updating the program as follows: setProgram({...program,studentId= selectedStudent?.id}) The t ...

Is compiling to JavaScript necessary for a CDK TypeScript project?

While working on my sample App using the CDK, I encountered some questions. I made changes to the stack.ts file in my project, and then ran cdk synth and cdk deploy. Surprisingly, it appears that compiling to JavaScript was not necessary for my project. U ...

What are the steps to troubleshoot a Node Package Manager library in Visual Studio Code?

I have created a Typescript library that I plan to use in various NodeJS projects. The source code is included in the NPM package, so when I install it in my projects, the source also gets added to the node_modules folder. Now, during debugging, I want to ...

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

Looking to achieve Two-way data binding of Checkbox in Angular Reactive forms. After checking the checkbox, I am updating the 'isdateChkd' variable and storing it in the state. Despite the variable being set to TRUE, the checkbox does not get aut ...

I require a duplicate of the original data. Direct references are unnecessary

I am trying to extract the value of data.notes. After implementing the code below, I noticed that the detailsOfCurrentNotes value changes based on the data.notes. Can anyone provide guidance on how to resolve this issue? notes :Note[] const detailsOfCur ...

Using AngularJS to create a numeric input with a non-numeric model

I've encountered an error message related to an input field that is set as type "number" while the actual model is a string. The reason for this discrepancy is that my ngModel value is utilized in other areas of the application. However, for a specif ...

Improve your typing accuracy by enforcing strict null checks

I'm currently looking to enable strict null checks in my TypeScript 2.0 project, but I'm encountering some challenges with the typings of a dependency that is nested within another dependency (referred to as the dependency grandparent). To provi ...

Encountering difficulties while attempting to transition from angular 9 to angular 10

I attempted to upgrade my Angular project by running the following commands: $ ng update @angular/core@9 @angular/cli@9 $ ng update @angular/core @angular/cli However, when I executed the last command in the console, it resulted in an error message: Your ...

When the *ngFor directive disrupts the CSS Grid Layout, resulting in all items being displayed in a single column

I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website. My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link: Each box represents an ob ...

Retrieve a user by their _id, remove a user using their _id, and modify a user based on their _id using Next.js 14, utilizing Typescript

I'm currently troubleshooting three request methods that are not functioning properly: GET, UPDATE, and DELETE for a user by _id. When I try to run these requests in the browser or postman, I receive a "no page found" error in the API call. The rout ...

Creating custom views in Angular 8 based on user roles through directives

After reviewing an example on how to display components based on a user's role at this link: I'm encountering compilation issues due to missing arguments in the constructor within has-role.directive.spec.ts. The constructor in has-role.directive ...

Type error encountered in TypeScript when using React Hotkeys keymap

I'm currently following the instructions provided in the documentation. const keyMap = { CONTRACT: "alt+down", COMMAND_DOWN: { sequence: "command", action: "keydown" } }; An error is occurring and I'm unsure ...

Passing public field names with typed expressions in TypeScript

I've been exploring ways to pass an array of property names (or field names) for a specific object without resorting to using what are often referred to as "magic strings" - as they can easily lead to typos! I'm essentially searching for somethin ...

Determine the data type of a function's parameter

Given that TypeScript is a superset of Javascript and 'Type' is not present in the resulting js files, does this mean manipulating 'type' will not function as intended? Furthermore, are there any alternative approaches to achieve this ...

What is the best way to divide a string into an array containing both linked and non-linked elements?

I'm struggling to find the right solution to my problem. I need to create a view that is enclosed in a clickable div. The content will consist of plain text mixed with clickable URLs - the issue arises when clicking on a link also triggers the method ...

What method can be used to modify the src attribute of an <img> tag given that the id of the <img> element is known?

My challenge involves displaying an array of images using a *ngFor loop. itemimg.component.html <div *ngFor="let itemimg of itemimgs" [class.selected]="itemimg === selectedItemimg" (click)="onSelect(itemimg)"> <img id="{{itemim ...

Guide to setting up .env Variables on a DigitalOcean Ubuntu droplet

After deploying my Node.js app on a DigitalOcean Ubuntu droplet, I encountered the need for variables from my .env file. How can I go about creating these variables within the DigitalOcean droplet? ...

Tips for maintaining data reactivity while transmitting it to a function

Consider the following setup for my component: <script setup lang="ts"> interface FileMetadata { owner: string, location: string, size: number, // And around 50 mores... } interface File { fileName: string, metadata: FileMetada ...