Tsconfig.json modifications not working

Ionic Framework ionic-v3
1

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 case anyone is interested in reproducing 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();
2 Likes
2

tsconfig.js

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "app/*": [
        "app/*"
      ]
    }
  },
 ...
}

packake.json

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

Copy webpack.config.js from node_modules/@ionic/app-scripts/config/webpack.config.js to config/webpack.config.js and add resolve.alias for app

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: { app: path.resolve('src/app') },
  },
3

I tried exactly that and it doesn’t work. Have you tried? Could you explain why it should work? (maybe some link to any documentation).

4

Hi. Here is the link to the webpack Webpack configuration - resolve alias. You have to add the app to the webpack config. It is working to me

Example from my code where I am calling service from ‘app/service’

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, Events } from 'ionic-angular';

import { Shop, Rating } from 'app/services';
import { ShopRatingDetailPage } from  './rating-detail';

@Component({
    selector: 'page-shop-rating',
    templateUrl: 'rating.html'
})
export class ShopRatingPage implements OnInit {
5

Here is one more think which I forgotten

ionic --version
2.2.1
6

Incase someone is having similar trouble to figure what exact changes you need to make get this working. I have posted my answers for this problem here :

7

This has also been solved in the github issue: https://github.com/ionic-team/ionic-cli/issues/1809