TypeScript tricky module not found error

Question

I'm using ionic 1 and thought it might be a good idea to change to TypeScript. Then of course I wanna use the ionic-native features.

• I tried to: import {Calendar} from 'ionic-native';
• but I got: [ts] Cannot find module 'ionic-native'.

So went to read the docs How TypeScript resolves modules. Docs says it tries to locate the module in following paths:

1. /root/node_modules/moduleB.ts
2. /root/node_modules/moduleB.tsx
3. /root/node_modules/moduleB.d.ts
4. /root/node_modules/moduleB/package.json (if it specifies a "typings" property)
5. /root/node_modules/moduleB/index.ts
6. /root/node_modules/moduleB/index.tsx
7. /root/node_modules/moduleB/index.d.ts 

So I looked into my node_folders and see if one path matches:

node_modules
- ionic-native
-- dist
-- package.json

So I think number 4. should match, since the package.json contains:

"typings": "dist/es5/index.d.ts

But it's not working.

If I instead do:

import {Calendar} from '../../../node_modules/ionic-native/dist/es5/index';

it works but I do not want to do it like this in all files, that's way too complicated :/

---

Because I wanted to move forward, I searched for another way in the TypeScript docs. I also could read that you can put a paths property for modules in tsconfig.json

But the funny part of it is, if I put correct json it, it doesn't works:

"paths": {
  "ionic-native": ["node_modules/ionic-native/dist/es5/index.d.ts"]
}

When i put invalid json in it, it works (note the missing "):

"paths": {
  ionic-native: ["node_modules/ionic-native/dist/es5/index.d.ts"]
}

Any ideas?

Answer 1

I followed a TS tutorial and just copied the tsconfig.json, but there are different types of modules and I had

"module": "system",

just replaced it with

"module": "commonjs",

and whooops, instantly everything works, like I ever wanted.