Issue with Ionic 2.0.0.Beta 17 with generated providers

Ionic Framework ionic-v3
1 
./app/providers/configuration/configuration.js
Module build failed: SyntaxError: /Users/jeremykeczan/Projects/web/pinch-ui/app/providers/configuration/configuration.js: Unexpected token (12:18)
  10 | @Injectable()
  11 | export class Configuration {
> 12 |   constructor(http: Http) {
     |                   ^
  13 |     this.http = http;
  14 |     this.data = null;
  15 |   }
    at Parser.pp.raise (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:1425:13)
    at Parser.pp.unexpected (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2905:8)
    at Parser.pp.expect (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2899:33)
    at Parser.pp.parseBindingList (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:1605:12)
    at Parser.pp.parseMethod (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:1097:22)
    at Parser.pp.parseClassMethod (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2581:8)
    at Parser.pp.parseClassBody (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2542:10)
    at Parser.pp.parseClass (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2425:8)
    at Parser.pp.parseStatement (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:1889:19)
    at Parser.pp.parseExportDeclaration (/Users/jeremykeczan/Projects/web/pinch-ui/node_modules/babylon/index.js:2664:15)
 @ ./app/pages/home/home.js 12:21-69 (CLI v2.0.0-beta.17)

Your system information:

Cordova CLI: 4.2.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: 1.8.2
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2.1 Build version 7C1002

WebStorm 11 IDE

Any assistance would be appreciated

2

You are running a typescript file and calling in a javascript file. JS does not support typings, so http: Http will not resolve. If you absolutely insist on using JS instead of TS you’ll need to replace that bit with @Inject(Http) http, if I recall correctly. Typescript is one of the really nice changes that came along with Angular 2 though. I would strongly looking into it.

Also, if you are interested in more information about why injection works like that, please see Pascal Precht’s post here.

1 Like
3

Ok, that makes sense. Curiously, that file was created by

ionic generate provider configuration

the project was created with

ionic start pinch-ui --v2

Why would the generated provider not work directly with the generated ionic project?

4

Ionic2@alpha was doing some weird black magic with webpack where they were labeling a bunch of files as .js when they were actually typescript files. Their webpack script would recognize that they were actually typescript and deal with them. I thought they had corrected their defaults to provide the correct type extensions, but it is possible they haven’t.

I’ve not pulled a fresh project from Ionic in quite awhile, so I really don’t know what the current status of that is.

1 Like
5

Ah, gotcha.

It looks like they have a dedicated flag for starting a typescript project

ionic start pinch-ui --template blank --ts --v2

This actually generates .ts files which seem to work.

Thanks for your help!

1 Like