CODEWITHSUNDEEP
typescriptnpmionic2dependencies
Koeno
Koeno

Reputation: 1583

Dynamic imports for Ionic 2 outside of "node_modules"

I've read the description for ModuleResulution for typescript at this page: https://www.typescriptlang.org/docs/handbook/module-resolution.html#node

From what I understand is that all the files which I want to import MUST be in the node_modules directory. Is there a way to import files that are not located in this directory?

Let's say I have the following directory structure (src/MyApp/):

├── Console
│   └── Console.ts 
├── Interfaces
│   └── CredentialsInterface.ts 
└── Service
    ├── Authentication.ts
    ├── Router.ts
    └── Connector.ts

Then for example in my src/pages/login/login.ts I use this to import Console.ts:

import { Console } from '../../MyApp/Console/Console';

But I want to achieve something like this:

import { Console } from '@MyApp/Console/Console';

Where the @MyApp is an alias for src/MyApp.

Because of potential file / folder relocations or refactoring later I might want to replace the location of my files, but I do not want to go through all my files manually to change the "hardcoded" path if that makes sense, and I know for a fact that this is possible for other tools like Composer.

Is this in any way possible? Thanks in advance!

Upvotes: 1

Views: 370

Answers (1)

gabfiocchi
gabfiocchi

Reputation: 298

To do that you have to update a couple of files, you can do it by updating the tsconfig.json and extending the webpack configuration file.

On tsconfig.json you need add on compilerOptions:

"baseUrl": "./src",
"paths": {
  "app/*": [
    "app/*"
  ],
  "@env": [
    "environments/environment"
  ],
  "interfaces/*": [
    "interfaces/*"
  ],
  "providers/*": [
    "providers/*"
  ],
  "validators/*": [
    "validators/*"
  ]
}

I leave a link to a brief documentation that I did that implements this and also uses the enviroments of angular-cli

Ionic envs and beauty paths

Upvotes: 1

Related Questions