CODEWITHSUNDEEP
javascripttypescriptangularionic2
Emanuel
Emanuel

Reputation: 582

Unable to switch from JS to TS in ionic 2

I changed the file extensions of my app files including app/app.js

Error: Cannot find module 'app/app.js' from 'app_folder'

It doesn't tell me which file I should be looking at to fix the error.

I tried looking with git grep and read a bit about Angular2's entry points to find out where it is loaded, but no luck yet.

Upvotes: 3

Views: 910

Answers (2)

Emanuel
Emanuel

Reputation: 582

Thierry Templier put me on the right track, and here is the answer.

Documentation in case anyone else is wondering.

Ionic2 is different than ionic1 basically uses browserify now. To switch from ES6 to TS, you would need to setup typscirpt for your project and set the dependencies like so:

  1. in gulpfile.js change var buildBrowserify = require('ionic-gulp-browserify-es2015');
    for var buildBrowserify = require('ionic-gulp-browserify-typescript');
  2. in package.json change ionic-gulp-browserify-es2015": "^1.0.2"
    for "ionic-gulp-browserify-typescript": "^1.0.0"

  3. Install typescript

    3.1 npm install typings --global

    3.2 tsd query node --action install --save

  4. Make sure you have the file your_app/typings/main.d.ts
    with the content: /// <reference path="main/ambient/es6-shim/index.d.ts" />

  5. lastly the tsconfig.json file

    tsconfig{ "compilerOptions": { "target": "es5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true }, "filesGlob": [ "**/*.ts", "!node_modules/**/*" ], "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ], "compileOnSave": false, "atom": { "rewriteTsconfig": false } }

Upvotes: 2

Thierry Templier
Thierry Templier

Reputation: 202156

Using TypeScript into an Ionic2 project isn't just switching extensions of files ;-)

You need to integrate the TypeScript compiler into Gulp with the gulp-tsc' plugin:

var typescript = require('gulp-tsc');

(...)

gulp.task('compile', function() {
  gulp.src(paths.src)
    .pipe(typescript({
      emitError: false
    }))
    .pipe(gulp.dest('www/js/'))
});

This page could help you:

Upvotes: 3

Related Questions