Hi all,
I have this strange SyntaxError on the colon ( : ) character.
For example in the following piece of code:
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
}
When I try to save the file I’ll get the SyntaxError for the line + position of the colon for the one at the property engine and for the parameter engine.
Is there something wrong with this code? All the examples I’ve seen so far look the same.
Please help me 
Cheers,
Kevin
This is valid ES6 markup (tyested here: http://www.es6fiddle.net/imqlo1x9/)
This probably has some relation to your babel configuration:
Thanks for pointing me in the good direction. Only thing is that I don’t fully understand how to fix this problem yet. I’m new to developing in Ionic so hopefully there’s someone else who can help me solve this problem together with me. Meanwhile I will do my best to get this solved by myself. Thanks again!
I really can’t figure out whats wrong with my babel configuration. According to the link I need babel-preset-react, and I have it. This is how my package.json looks like:
{
“dependencies”: {
“angular2”: “2.0.0-beta.6”,
“es6-promise”: “3.0.2”,
“es6-shim”: “0.33.13”,
“ionic-angular”: “2.0.0-beta.3”,
“ionic-native”: “^1.1.0”,
“ionicons”: “3.0.0-alpha.3”,
“reflect-metadata”: “0.1.2”,
“rxjs”: “5.0.0-beta.0”,
“zone.js”: “0.5.14”
},
“devDependencies”: {
“babel-plugin-transform-decorators-legacy”: “1.3.4”,
“babel-preset-es2015”: “6.6.0”,
“babel-preset-es2016-node5”: “^1.1.2”,
“babel-preset-react”: “^6.5.0”,
“babelify”: “7.2.0”,
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“ionic-gulp-browserify-es2015”: “^1.0.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^1.0.0”,
“run-sequence”: “1.1.5”
},
“name”: “count”,
“description”: “Count: An Ionic project”,
“cordovaPlugins”: [
“cordova-plugin-device”,
“cordova-plugin-console”,
“cordova-plugin-whitelist”,
“cordova-plugin-splashscreen”,
“cordova-plugin-statusbar”,
“ionic-plugin-keyboard”
],
“cordovaPlatforms”: [
“android”
]
}
I would really appreciate some more help with fixing this issue
I deleted my node_modules folder and ran npm install again.
Still the same issue.
Also ran:
npm install babel-plugin-transform-flow-strip-types
The plugin is already included in react.
Investigating the same issue I found out the following:
If you want to use the type annotations there’s a workaround in the linked post.
Or you could remove the type annotations and the issue should disappear.
Looks like an error I got earlier this week. My fix was…
static get parameters() {
return [[string], [string], [string]];
}
constructor(engine, wheels, soOnAndOnAndOn) {
this.engine = engine;
// ...
}
Hey all! That is a valid TypeScript type, but it isn’t valid ES6/ES2015 syntax. Angular2 uses that type information in TypeScript projects for doing dependency injection, so in JS projects you need to use the static getter parameters to attach that information to the class (so Angular2 knows what thing it should inject).
This didn’t error previously because Ionic starters were using the TypeScript compiler under the hood, but it should have been, as types are not valid syntax in JS.
Thanks!!! This worked for me. You’re the best!
Hi! Could someone kindly expand on this? I have a simple component that gives me this error:
Syntax error: …Missing class properties transform. while parsing file:…
It’s an Ionic 2 project. My project is just Javascript. I have been using static get parameters but I am unsure how to implement this for an Input directive.
import {Component, Input} from ‘angular2/core’;
@Component({
selector: ‘sub-viewer’,
template: ‘
export class SubViewer {
@Input() content;
}`
For anyone with this issue - you cannot use @Input() with regular javascript. For inputs you can add into the Component decorator like this:
@Component({
selector: ‘your-selector’,
template: '
you can then reference the input data as a regular variable.