3

I started an ionic 2 project and one of the few things I don't like is the relative paths. I read some documentation from typescript and I modified the tsconfig.json file, and seems like the modifications I do are not taking any effect in the ionic app (but are working in typescript).

I learned how typescript works from the documentation: http://www.typescriptlang.org/docs/handbook/module-resolution.html

I validated that my changes to tsconfig.json are correct since calling "tsc --traceResolution" tells me the resolution is working. But once I launch the ionic app I get the "Cannot find module" error.

Example

In order to reproduce the issue, create a brand new ionic 2 project, modify tsconfig.json by adding the following to compilerOptions:

"baseUrl": "./src",

Then create the file src/foo.ts with the contents:

export class Foo {}

finally add the following to app.module.ts:

import { Foo } from 'foo';
new Foo();

As far as I understand that should work, it doesn't and for it to work it is necessary to have the following (which I want to avoid):

import { Foo } from '../foo';
new Foo();
Noel De Martin
  • 2,779
  • 4
  • 28
  • 39
  • Did you have any luck with this? – yafrack Dec 24 '16 at 03:42
  • @yafrack No :/ I think I will wait until ionic 2 final is released to continue with this, since I also opened this on the ionic forum and there isn't any reply either. – Noel De Martin Dec 25 '16 at 19:40
  • So you are just doing the long paths right now? If it's a bug it I don't know why it's not a priority. It makes big projects unscalable :( – yafrack Dec 25 '16 at 19:58
  • Yes I am doing the long paths right now. Well seeing that someone else is interested in this I will continue to push it forward. Part of my decision to wait for this until the final release is that I got no response anywhere. I will update this question if I get any more updates :D. – Noel De Martin Dec 25 '16 at 20:19
  • http://stackoverflow.com/questions/34925992/how-to-avoid-imports-with-very-long-relative-paths-in-angular-2 http://stackoverflow.com/questions/41310614/relative-paths-baseurl-and-paths-not-working-on-ionic2-angular2/41317368?noredirect=1#comment69838671_41317368 http://stackoverflow.com/questions/34373642/angular-2-importing-module-without-having-to-traverse-e-g?rq=1 – yafrack Dec 25 '16 at 20:25
  • Yes seems like your question is basically the same problem that I have. Let's see if we can find a way to fix this. – Noel De Martin Dec 25 '16 at 20:34

1 Answers1

3

You need to override the default webpack.config.js to be able to resolve files relative to the baseUrl.

In order to use a custom webpack configuration file with ionic, this should be added to the package.json of the project: 

{
    ...
    "config": { "ionic_webpack": "./webpack.config.js" },
    ...
}

And then in ./webpack.config.js:

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

// to match the basePath in tsconfig.json, we add src as a module path, which means we can use
// module style imports for our code. Without this, an import that typescript thinks is valid, like
// `import { Foo } from 'foo';` will fail at build time
useDefaultConfig.dev.resolve.modules.push(path.resolve('src'));
useDefaultConfig.prod.resolve.modules.push(path.resolve('src'));


/**
 * export the update ionic webpack configs (this still includes both dev & prod webpack configs)
 */
module.exports = function () {
  return useDefaultConfig;
};
studds
  • 1,395
  • 10
  • 15
  • 1
    As extra information, in order to use a custom webpack configuration file with ionic, this should be added to the package.json of the project: "config": { "ionic_webpack": "./webpack.config.js" } Also, this answer does solve the question, but since I did the question a long time ago, I have already solved this problem with a different approach (which also involves using a custom webpack config). My current approach was taken from this: https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/ – Noel De Martin Dec 11 '17 at 08:50
  • Thanks @NoelDeMartin, I forgot to mention that - edited the answer accordingly. Nice blogpost also! – studds Dec 12 '17 at 00:39
  • I have been using Ionic 3 and after doing the above configuration, it's still not working. – Tavish Aggarwal Jan 24 '19 at 17:15