Struggling to make the transition from JavaScript to TypeScript in Ionic 2

Question

Struggling to make the transition from JavaScript to TypeScript in Ionic 2

I recently updated the file extensions for my application files, including app/app.js.

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

The error message doesn't specify which file I need to locate to resolve the issue.

I attempted to search using git grep and researched Angular2's entry points to determine where it is being loaded from, but I haven't had any success so far.

javascript typescript angular ionic2

Answer 1

Answer №1

Transitioning TypeScript into an Ionic2 project requires more than just changing file extensions.

To successfully incorporate TypeScript into Gulp, utilize 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/'))
});

For further guidance, refer to the following page:

https://github.com/driftyco/ionic-typescript-example

Answer 2

Transitioning TypeScript into an Ionic2 project requires more than just changing file extensions.

To successfully incorporate TypeScript into Gulp, utilize 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/'))
});

For further guidance, refer to the following page:

https://github.com/driftyco/ionic-typescript-example

Answer 3

Answer №2

Thierry Templier guided me in the right direction, revealing the solution.

For the benefit of others seeking clarification, here's the documentation.

There are notable distinctions between Ionic2 and Ionic1, primarily the shift to using browserify. To transition from ES6 to TS, the necessary steps involve configuring TypeScript for your project and adjusting the dependencies as follows:

Modify the gulpfile.js by replacing

var buildBrowserify = require('ionic-gulp-browserify-es2015');

with

var buildBrowserify = require('ionic-gulp-browserify-typescript');

Update the package.json by changing

ionic-gulp-browserify-es2015": "^1.0.2"

to

"ionic-gulp-browserify-typescript": "^1.0.0"

Install TypeScript

3.1 Run npm install typings --global

3.2 Execute
```
tsd query node --action install --save
```
Ensure the existence of the file your_app/typings/main.d.ts
containing the following:
```
/// <reference path="main/ambient/es6-shim/index.d.ts" />
```

Lastly, configure 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
  }
}

Answer 4

Thierry Templier guided me in the right direction, revealing the solution.

For the benefit of others seeking clarification, here's the documentation.

There are notable distinctions between Ionic2 and Ionic1, primarily the shift to using browserify. To transition from ES6 to TS, the necessary steps involve configuring TypeScript for your project and adjusting the dependencies as follows:

Modify the gulpfile.js by replacing

var buildBrowserify = require('ionic-gulp-browserify-es2015');

with

var buildBrowserify = require('ionic-gulp-browserify-typescript');

Update the package.json by changing

ionic-gulp-browserify-es2015": "^1.0.2"

to

"ionic-gulp-browserify-typescript": "^1.0.0"

Install TypeScript

3.1 Run npm install typings --global

3.2 Execute
```
tsd query node --action install --save
```
Ensure the existence of the file your_app/typings/main.d.ts
containing the following:
```
/// <reference path="main/ambient/es6-shim/index.d.ts" />
```

Lastly, configure 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
  }
}

Struggling to make the transition from JavaScript to TypeScript in Ionic 2

Answer №1

Answer №2

Similar questions

The selected value of the PrimeNG p-checkbox cannot be determined using a function when binding to [ngModel]

We apologize, but Google Pay encountered an unexpected developer error that caused the request to fail. Please try again later

Create a Jest mock for a namespace and a function that have the same name

Is there a method in Vuejs to choose a tab and update components simultaneously?

Like button for Facebook located at the bottom of a static webpage

Why isn't my textarea in jQUERY updating as I type?

What is the cause of the error message "property 'map' is undefined"?

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

How to fetch a single document from a nested array using Mongoose

Is there a way to retrieve the objects generated by DirectionsRenderer on Google Maps V3?

Is there a way to deactivate the toggle button in my code?

The LoopBack framework encountered an issue where it could not execute the 'post' method due to being undefined

Error: Attempting to access 'map' property on an undefined object in a ReactJS application

Utilize VueJS to upload and visualize a file input on your website

Troubleshooting: AngularJS ng-repeat not rendering JSON data

Why aren't my cookies being successfully created on the frontend of my application when utilizing express-session and Node.js?

Executing multiple nested $http calls in Angular can significantly slow down the process

Incorporating external Angular 4 components within my custom components

Using PHP and JavaScript to alter the text color within a table cell