Atom-typescript does not always successfully compile all typescript files to JavaScript

Currently, I am in the process of learning how to implement routing in Angular2 by following a tutorial. The tutorial involves creating partial pages using .ts files along with companion .js files for each page. While my Atom editor, equipped with atom-typescript plugin, successfully compiles my app.ts file into app.js upon any changes made, it fails to compile the partial pages located in another directory.

For example, when the file is named homePage.ts, the console error reads "cannot find homePage.js". On the other hand, if the file is named homePage.js, the console throws an error stating "unexpected token @" at the line where @Component is used.

Despite having "compileOnSave": true in my tsconfig file placed in the project's root directory, the issue persists. I attempted to include "filesGlob" in the tsconfig as per the documentation, but that did not resolve the problem.

My current compilerOptions are set as follows:

"compilerOptions": {
    "charset": "UTF-8",
    "declaration": false,
    "diagnostics": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "noImplicitAny": false,
    "noLib": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "version": true
},

Now, I am unsure whether both .ts and .js files are required for all components and how can I ensure they are compiled properly by atom-typescript. Alternatively, I would like to understand why the unexpected token @ error occurs.

Answer №1

Why do I keep encountering the unexpected token @ error?

To resolve this issue, ensure that the experimentalDecorators option is set to true. So :

"compilerOptions": {
    "charset": " UTF-8",
    "declaration": false,
    "diagnostics": true,
    "experimentalDecorators", true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "noImplicitAny": false,
    "noLib": false,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "version": true
},

Just a heads up, this is how decorators are implemented in the TypeScript compiler 🌹

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

TS: A shared function for objects sharing a consistent structure but with varied potential values for a specific property

In our application, we have implemented an app that consists of multiple resources such as Product, Cart, and Whatever. Each resource allows users to create activities through endpoints that have the same structure regardless of the specific resource being ...

Transformation of Python code into Blockly blocks

As the founder of edublocks.org, I am interested in adding Python to Blocks functionality on the platform. At the moment, users can only transition from Blocks to Python. Is there anyone who has experience with this and can provide guidance on how to achi ...

Fetching an image from a fixed storage location with the help of Express JS in Angular 2

Utilizing node js and express on the backend, I have a static folder filled with various images. My current task involves loading these images using angular 2 on the client side. Below is a snippet of my code: Backend side: app.use(express.static(__dirna ...

Converting an array of arrays into an object with an index signature: A step-by-step guide

I find myself facing a challenge where I have two types, B and A, along with an array called "a". My objective is to convert this array into type B. Type A = Array<[string, number, string]>; Type B = { [name: string]: { name: ...

Having difficulties creating a new instance of a class

I'm encountering an issue with this TypeScript code import Conf = require('conf'); const config = new Conf(); The Problem: the expression is not constructable and the imported module lacks construct signatures It's puzzling because th ...

Tips for resolving the issue with the 'search input field in the header' across all pages in angular 5 with typescript

I currently have a search field in the header that retrieves a list of records when you type a search term and click on one of them. The search function utilizes debounceTime to reduce API requests, but I'm encountering an issue where the search doesn ...

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

When attempting to examine values between operators in an rxjs pipe, I decided to use tap to log them to the console. I added two taps, one before a map operator used for sorting an Array, and one after. Surprisingly, both taps logged the same sorted Arra ...

Is there a way for me to operate the identical application in isolation?

I am looking to develop a unique service catering to individual companies. Instead of having the application run in the same container for each company, I would prefer to have a dedicated container for every company. For instance: google.serviceapplicat ...

Guide to executing various datasets as parameters for test cases in Cypress using Typescript

I am encountering an issue while trying to run a testcase with multiple data fixtures constructed using an object array in Cypress. The error message states: TS2345: Argument of type '(fixture: { name: string; sValue: string; eValue: string}) => vo ...

The initial rendering of components is not displayed by Vue Storybook

The functionality of the storybook is effective, but initially, it fails to "render" the component. By examining the screenshot, we can deduce that the component-template is being utilized in some way, as otherwise, the basic layout of the component would ...

Troubleshooting: Issue with Angular 2 FormArray

Hey there! I'm currently working on my Angular 2 Recipe app where I want to display multiple ingredient details. I am using a FormArray but encountered an error while debugging with the browser developer tools. The error displayed on the Console tab i ...

Tips on pre-filling a form using ngModel bindings

I have designed a Modal page where I aim to display pre-populated data to the user. Whenever the user edits the data, it should be bound to my local variable collectDataInModalPage_afterEdit. Check out the demo here:: https://stackblitz.com/edit/ionic-jse ...

Generic parameter with a union type

The proxy function returns a randomly determined type. const numbersArray = [1,2,3,4]; const stringsArray = ['1','2','3','4']; function func<T>(array: T[]): T[][] { return [[array[0], array[1]], [array[2], ...

Hamburger Menu in Bootstrap not functioning as expected

Despite following each step meticulously for implementing the Hamburger menu in the navbar, I encountered an issue. The navbar collapses when resizing the window but fails to open upon clicking it. Below is a sample code snippet for reference. It utilizes ...

Creating a Jest TypeScript mock for Axios

Within a class, I have the following method: import axios from 'axios' public async getData() { const resp = await axios.get(Endpoints.DATA.URL) return resp.data } My aim is to create a Jest test that performs the following actions: jes ...

Can anyone guide me on implementing getServerSideProps in a TypeScript NextPage component?

I've come across a page that I'd like to replicate, with the code sourced from https://github.com/dabit3/nextjs-lit-token-gating/blob/main/pages/protected.js: import Cookies from 'cookies' import LitJsSdk from 'lit-js-sdk' ex ...

Tips for interacting with the DOM in an Angular 4 application

I am trying to call the addItems method, but I keep getting an error: Uncaught TypeError: this.addItems is not a function Currently, I am using Angular 4 along with jQuery and the fullpage.js library. page-content.component.ts import { Component, OnI ...

I'm facing difficulty in setting up an Angular project through the VS code terminal

After successfully installing Node.js v12.18.2 and npm version v6.14.5, I attempted to create an Angular app using the command prompt. However, when trying to run the same command on the VS code terminal, I encountered the following error: 'ng' ...

Is the Inline Partial<T> object still throwing errors about a missing field?

I recently updated to TypeScript version ~3.1.6 and defined an interface called Shop as follows: export interface Shop { readonly displayName: string; name: string; city: string; } In this interface, the property displayName is set by the backend a ...

Passing the output of ComponentA as the input for ComponentB in Angular

I have just started learning Angular and one strategy I find helpful is to work on small projects. Currently, I am focusing on 3 components, but for now, only two are relevant: TANavBarComponent TAPageContainerComponent Within my TANavBarComponent, I aim ...