How do I include typescript from an external folder?


#1

Idea:
So my plan was to move the code, that i use to comunicate with my server out into a seperate plain typescript module, to have an universal clientside-“backend” that I can not only use for my Ionic app, but also for a electron app or a app with other frameworks like maybe nativescript later on, when my app is finished.

But curently I can’t get it to work properly:

  • First I tried to make a npm module that i compiled with tsc -w it kind of worked but ervery time I made a change ionic serve had also to be triggered to recompile with a change in the app- src files and even then i had to restart ionic serve a couple of times,because it didn’t used the new version of my module always right away.
    But it worked for the most part, so I was happy.
    Until it said that a type from my module wasn’t the same as the same type used in a function that I accessed from that module.
    After some investigation I found out this was because angular had added some internal properties to my type.
    So I started to make a dirty workaround by adding the optional propertys to my type that angular wanted to have. After 5 of them I quickly realized that this was a bad decission so I tried the next thing.

  • I remembered that ionic had demo and source in two different folders, so I decided i wanna try to do sth. in that direction.
    So here am I, I already modified my tsconfig.json and changed all imports to relative ones instead of my custom module.

my simplified file structure:

┬ Core
├─ node_modules // left over from the time this was a independent module
└┬ src
 ├─ {...} // all other ts files that index.ts exports parts of
 └─ index.ts // this is the module I want to import, it exports all the different vars, classes and function from the other files that I may want to use in the Ionic app.
┬ IonicApp
├─ node_modules
├─ src
├─ {...} // much more
└─ tsconfig.json

my tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "../Core/src/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

But I get an error:
Module build failed: Error: ENOENT: no such file or directory, open 'C:\#######\Core\src\index.js.map'

Question:
What did I do wrong? And what is the right way to do it?


#2

Ok, I will try the module aproach in the next time again… and doing my data processing as a Provider to workaround the type errors and do only the low level stuff in my module…

But if sb. got another solution I would really like to try it.


#3

that was caused by a typo so everything is good now, i’ll open another topic for the reloading problem:

at some point in the future.