TS6054: The file 'app/app.ts.' is using an invalid extension

Error Message: "error TS6054: File 'app/app.ts.' has an unsupported extension. The only supported extensions are '.ts', '.tsx', '.d.ts', '.cts', '.d.cts', '.mts', '.d.mts'". The file is in the program because: Root file specified for compilation Found 1 error.

Currently enrolled in a programming course where Typescript is being integrated with Angular. Following the instructions, I installed NodeJS and TSC as requested. For a practice exercise, we were instructed to create an "app.ts" file within an "app" folder in VSC, write a simple "Hello World" program, and compile it using the command "tsc app/app.ts," which should output a new "js" file. Although my first attempt was successful, I encountered this error when redoing the same steps for a new project. The error message mentions an unsupported file extension, despite the fact that ".ts" is a valid extension according to the error itself.

Update: I have double-checked for any typos by trying both "app.ts." and "app.ts," with the latter resulting in the error TS6053: File 'app/app.ts' not found. Interestingly, during my initial attempt, using "tsc app/app.ts." with the period at the end worked flawlessly. Although unconventional for file extensions, the period is essential for file recognition.

Could the issue be related to the file location?

Update: It appears that the problem was indeed a typo. The textbook misled me by including the period at the end of the command. By relocating the TS file to a different directory and running the command without the period from the parent directory, the compilation process was successful. Despite feeling slightly embarrassed, I appreciate the assistance provided. I will repeat the process to confirm that the typo was the root cause, not the file's location within the folder structure.

Answer №1

Update the file name from app.ts. to app.ts

Eliminate the unnecessary dot (.) at the end. It could be a mistake.

If the typo isn't the problem, try restarting Visual Studio to resolve this issue.

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

Error in Angular 11: Unspecified parameter in the URL

I've been working on passing a URL parameter received from a GET request to the Contracts component. However, when visiting the Contracts component in the URL, the passed parameter appears as undefined. Here's what I have tried so far: In my app ...

Why use rxjs observables if they don't respond to updates?

I have an array of items that I turn into an observable using the of function. I create the observable before populating the array. However, when the array is finally populated, the callback provided to subscribe does not execute. As far as I know, th ...

Unable to access this context in Firefox debugger after promise is returned

I'm curious as to why the 'this' object is not showing up in the debugger in Firefox, but it does appear in Chrome's debugger. When I try to access 'this.myProperty', it shows as undefined. This is the code from my TypeScript ...

What is the best method for arranging components?

I have a Product component that contains crucial information about various products. Adjacent to this data, there is a separate component called Buttons, which includes two buttons - one for adding the product to a favorites list and another for adding it ...

Attempting to grasp the concept of Thennables within the VSCode API. Can these TypeScript code examples be considered equivalent?

I'm looking to perform a series of modifications on a document using the VSCode API. The key function in this process is Workspace.applyEdit, which gives back a Thennable. This is my first encounter with it, and the one returned from this function doe ...

Newest Angular package.json

Each time I attempt to update my Angular components to the latest version, I encounter the same error. It seems like a never-ending cycle... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/ ...

How to incorporate scope into the Transloco Translation API?

When using this.translocoService.translate('object.test');, how can I set the scope? My translation files are located in a folder named "MyFolder", so the scope will be MyFolder. The structure of my *.json files is as follows: { "demo": "te ...

The use of the .reset() function in typescript to clear form data may lead to unexpected

I've been trying to use document.getelementbyID().reset(); to reset form values, but I keep running into an error in TypeScript. Property 'reset' does not exist on type 'HTMLElement'. Here's how I implemented it: const resetB ...

What is the method to incorporate @angular/fire into an Nx Workspace for an Angular project?

Incorporating @angular/fire into my Nx workspace for my Angular application is my current goal. Despite my efforts to adhere to best practices, I have not found any guidance in the official documentation on how to incorporate this library into the wor ...

typescript create object with some properties using object literal

Is there a way to initialize an instance of a class with an object literal that doesn't contain all the elements in the class, but those present are part of the class? class Example{ text:string; number:number; displayResult(){return thi ...

Error encountered in Angular NGRX while accessing the store: Trying to read property 'map' of an undefined variable

I have integrated NGRX effects into my Angular application and encountered the following error. I'm uncertain if I am using the selector correctly in my component to query the store? core.js:6162 ERROR TypeError: Cannot read property 'map' o ...

Retrieving a string value from a child route in Angular 2

Looking to set the header title from a child route view... In the parent component: @Component({ selector: 'parent-component', template: ` <header>{{headerTitle}}</header> <router-outlet></router-outlet ...

Generate a Jest dummy for testing an IncomingMessage object

I am facing a challenge in writing a unit test for a function that requires an IncomingMessage as one of its parameters. I understand that it is a stream, but I am struggling to create a basic test dummy because the stream causes my tests to timeout. : T ...

Combining two elements in Angular 2

I am looking to find the intersection of two objects. My goal is to compare these objects and if they have matching values on corresponding keys, then I want to add them to a new object. obj1 = { "Projects": [ "test" ], "Companies": [ "facebook", "google ...

Updating the value in React context does not result in the value being updated

I am in the process of developing a simple routing system where users can either be authenticated or not. I have been using hooks to implement this functionality, but so far, it has not been as successful as I hoped for. authProvider.tsx import React, {Di ...

The file or directory npx-cli.js cannot be found in the specified location: ../npm/bin/

Problem Description After creating a new React project using the command below, npx create-react-app my-app --template typescript and utilizing node version v18.15.0, I attempted to set up Prettier for the project following the instructions in the Pretti ...

Using TypeScript with React may result in an error message stating that a string cannot be assigned to a parameter of type 'keyof T'

I've encountered an issue with my sorting function that I built using TypeScript and React Hooks. The error message I'm getting is: Argument of type 'string' is not assignable to parameter of type 'keyof T'. Type 'stri ...

What is the reason behind Angular generating files with 'es5' and 'es2015' extensions instead of 'es6' (or no extension)?

Recently, I installed the Angular CLI (@angular/cli 9.0.1). My goal was to create a new Angular Element, package it, and then integrate it into another application. Following several blog tutorials, I found that they all mentioned the final step of creati ...

Tips on utilising the datepicker solely with the calendar icon, avoiding the need for any input fields

I'm currently working on a Datatable filter and I would like to incorporate a calendar icon to facilitate date filtering by simply clicking on the Datatable Header. At this stage, I've managed to display a calendar Icon on my Datatable header, b ...

Exploring the integration of a standalone component in Angular 17 using an http service

I'm facing an issue with a standalone component: @Component({ standalone: true, // <--- See here selector: "app-login", imports: [FormsModule, CommonModule], templateUrl: "./login.component.html", styleUrl: "./lo ...