Unexpected token @ while using Angular2 with jspm and gulp for typescript compilation

Recently, I've delved into learning about Angular 2 and its accompanying technologies. In an attempt to create minified and "compiled" versions of my .ts files, I started using gulp-jspm-build. However, I encountered an error that has left me stumped. Any help would be greatly appreciated.

SyntaxError: app/menu/component.ts: Unexpected token (8:0)
   6 | import {OnInit} from "@angular/core/metadata/lifecycle_hooks";
   7 | 
>  8 | @Component({
     | ^
   9 |     selector: '[menu]',
  10 |     templateUrl: 'app/menu/template.html',
  11 | })
  at Parser.pp.raise...

I'm wondering if the absence of a typings.json file could be causing this issue?

typescriptangulargulpjspm

Answer №1

To begin, ensure that your transpiler is aware that you will be using decorators, as they are not yet supported natively (either in tsconfig.json or in your grunt/gulp configuration):

{
    "compilerOptions": {
        ...
        "experimentalDecorators": true, <- include this line

Next, make sure to import the component class from Angular:

import { Component } from '@angular/core';

Further information can be found here.

In regards to typings.json, it is unrelated. This file is utilized by typings (npm install -g typings) for managing TypeScript types. It aids your transpiler and IDE in understanding how you utilize external libraries written in ES6 or ES5 (without TypeScript types). Refer to this link for more details.

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

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

javascriptangulartypescriptgulpsystemjs

Incorporate the Angular router within markdown hyperlinks

When utilizing ngx-markdown to display my FAQ, I include links to both external resources (beginning with http) and internal content (starting with /). I am interested in passing the Angular router to my markedOptionsFactory so that I can easily navigate ...

angularmarkdown

Transform JSON into a TypeScript interface with a specialized Date method

Within my Angular 7 project, there is a Post Model defined as follows: export interface PostModel { id: number; created: Date; published: boolean; title: string; } I have implemented an Angular service method aimed at retrieving posts: public g ...

angulartypescriptangular6angular7

Issue with ngfactory.js warning in Angular 6+ when building in production mode, but the development build is running without any

I am encountering an error while trying to build Angular for production. Can someone please provide a solution to this issue? WARNING in ./src/app/userforms/login/login.component.ngfactory.js 149:679-708 "export 'MAT_PROGRESS_BAR_LOCATION' (impo ...

angularbuildwarningsproduction

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

javascriptreactjstypescriptreact-ref

Encountered an issue during the transition from Angular 7 to Angular 9

After following the advice in the second response of this discussion, I successfully upgraded to Angular 9. However, I am now encountering an issue in the browser console when running my project. Package.json "dependencies": { "@angular-devkit/build- ...

angulartypescriptivy

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

Automatically convert user input into a currency format as they type in the input field

I have a requirement for a text field where the user's input should be formatted as follows when they start entering: 0.00 (Start) 0.01 0.12 1.23 12.34 123.45 1,234.56 12,345.67 123,456.78 I am currently using a currency mask which works well, but I ...

angulardirective

Develop a flexible axios client

I have a basic axios client setup like this: import axios from "axios"; const httpClient = axios.create({ baseURL: "https://localhost:7254/test", }); httpClient.interceptors.request.use( (config) => config, (error) => Prom ...

typescriptvue.jsvuejs2axios

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

I have a React functional component with input fields, a button, and a tooltip. The tooltip is initially disabled and should only be enabled and visible when the button is clicked and the input fields contain invalid values. The issue I'm facing is t ...

javascriptreactjstypescriptreact-hookssetstate

Images in the Ionic app are failing to display certain asset files

Currently, I am working on an Ionic 4 app for both Android and iOS platforms. The issue I am facing is that only SVG format images are displaying in the slide menu, even though I have images in both SVG and PNG formats. public appPages = [ { ...

htmlangulartypescriptnpmionic4

The ERR_ASSERTION error is thrown because the catch clause variable is not an instance of the Error class

For some reason, I am unable to set up the authentication, firestore, and cloud storage in my project as I keep getting this error message: [error] AssertionError [ERR_ASSERTION]: catch clause variable is not an Error instance at assertIsError (C:\Us ...

angularfirebaseionic-frameworkangularfire

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Explore the sandbox environment here: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206. import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: ...

javascriptreactjstypescriptreact-nativematerial-ui

Adding Angular dependencies through Gulp (with the help of Browserify)

Exploring the use of Gulp and Browserify in my new Angular application. Inquiry: How can I effectively include angular dependencies in the app.js file without encountering dependency errors? Even with minimal dependencies, such as using only $stateProvid ...

javascriptangularjsnode.jsgulp

Retrieve the user information from Auth0 within the NestJS application

I am currently working on implementing Auth0 authorization in NestJS, but I am unsure of how to retrieve the user's data within the callback URL handler. In a normal express function, this issue could be resolved using the following code. The passpor ...

javascriptnode.jstypescriptauth0nestjs

Unexpected directory structure for internal npm module

Here is the package.json I use for building and pushing to an internal package registry: { "name": "@internal/my-project", "version": "0.0.0", "description": "Test package", "type&quo ...

typescriptnpm

How come accessing the superclass's property with a getter in TypeScript is not working as expected?

class A { protected _value:number; get value() { return this._value; } } class B extends A { set value(v:number) { this._value = v; } } var b = new B(); b.value = 2; console.log(b.value);//undefined Coding Pla ...

typescript

Angular 7 automatically updates array values with the most recent values, replacing any previous values in the process

Currently, I'm working with arrays and utilizing the map function to modify the data. Below is an array of icons: private socialIcons:any[] = [ {"icon":"thumbs-up","operation":"like"}, {"icon":"thumbs-down","operation":"unlike"}, {" ...

angularangular7

Setting up Electron to utilize TypeScript's baseUrl can be achieved by following a few simple steps

In TypeScript, there is a compiler option known as baseUrl that allows you to use non-relative paths, like: import Command from "util/Command" as opposed to: import Command from "../../../util/Command" While this works fine during compilation, TypeScri ...

typescriptelectron

Can someone provide guidance on utilizing the map function to iterate through intricate components in TypeScript?

I am facing a challenge while trying to iterate through a complex object containing 'inner objects'. When using the map function, I can only access one level below. How can I utilize map and TypeScript to loop through multiple levels below? Whene ...

jsontypescript