Ionic-2 Visual Code Project - Debugging/Buid Errors


#1

I am new to ionic 2 and just beginning to try it out. But i have so many problems using VS Code as my IDE. I have installed VSCode 1.2.0 and on 4 occasions using

  i. ionic start MyApp --v2 blank
 ii. ionic start MyApp --v2 tabs
iii. ionic start MyApp --v2 --ts blank
 iv. ionic start MyApp --v2 --ts tabs. 

For all these 4 projects, i have different challenges to the extent that none of the 4 project have succesfully compile or been built without different errors when i do so with VS Code. However all these projects run by firing ionic serve in their respective directories.

In the cases of i. & ii.

Import statements and @ statements had errors until i added a jsconfig.json file with the following details;

{ “compilerOptions”: { “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “module”: “amd”, “target”: “ES6” }, “files”: [ “app/app.js” ], “exclude”: [] }

After that, running/debugging the project from VS Code produced the error; (function (exports, require, module, __filename, __dirname) { import {Componen ^^^^^^ SyntaxError: Unexpected reserved word (in app\app.js:1) until i installed the following

npm install babel-cli --save
npm install babel-preset-es2015 --save

When i further ran/debugged, i have been getting the error (function (exports, require, module, __filename, __dirname) { @Componen ^^^^^^ SyntaxError: Unexpected unrecognised token

Now i am stucked.

On the otherhand, in the cases of iii. & iv.

In the attempt to run/debug the apps, the following errors kept occuring in the following order even after i made or 2 corresponding changes to the launch.json file

a. I had the error “Attribute ‘program’ does not exist (’${workspaceRoot}/app/app.js’)”. So i changed the “program” attribute of the configuration section in the launch.json file to ‘${workspaceRoot}/app/app.ts’

b. After the above, i had the error “Cannot launch program ‘${workspaceRoot}\app\app.ts’; configuring source maps might help.”, then i changed sourceMaps atrribute in the configuration section of launch.json to true “sourceMaps”: true

c. After the above, i had the error “Cannot launch program ‘${workspaceRoot}\app\app.ts’; setting the ‘outDir’ attribute might help.” then i changed the outDir atrribute in the configuration section of launch.json to “outDir”: “${workspaceRoot}/bin” and created the folder “bin” in project app root

d. But still, i have been having the same error as above even after all these changes.

Please can anyone give me better insights to these scenario having googled for the past 2 days.

Thanks