CODEWITHSUNDEEP
typescriptangulargulpjspm
Victor
Victor

Reputation: 51

Angular2 jspm gulp typescript unexpected token @

I've just started learning about angular 2 and all the technologies that come with it and I'm trying to use gulp-jspm-build to create minified and "compiled" versions of my .ts files. The problem is I get this error and I don't know how to solve it. Could i get some assistance pls

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 dont have a typings.json file, does that have to do with it?

Upvotes: 0

Views: 149

Answers (1)

Leogout
Leogout

Reputation: 1247

First, you need to tell to your transpiler that you work with decorators, as they are not supported natively yet (in tsconfig.json or in grunt / gulp configuration):

{
    "compilerOptions": {
        ...
        "experimentalDecorators": true, <- here

And then you have to import the component class from angular:

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

More info here.

For your question about typings.json, it is not related. This file is used by typings (npm install -g typings) to manage typescript types. It helps your transpiler and your IDE to understand your usage of external libraries written in ES6 or ES5 (without typescript types). See here for more info.

Upvotes: 0

Related Questions