Ionic 2 : importing custom components / modules with absolute path fails

Question

I'm developing an ionic 2 app with these dependencies:

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "^2.0.0-rc.4",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
"devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.6",
    "electron": "^1.4.12",
    "@types/jasmine": "^2.5.38",
    "@types/node": "0.0.2",
    "angular-cli": "^1.0.0-beta.21",
    "codelyzer": "^2.0.0-beta.1"
 }

The structure of the app is this one:

tsconfig.json
webpack.config.json
src
  app
     app.module.ts
  pages
     home
       home.page.ts
     login
  modules

When I import a module / Component / Class or whatever from

app.module.ts

using relative paths, theres no problem:

import { HomePage } from '../pages/home/home.page';

I prefer to use absolute paths, but i can't find the way to use them. I have tried to setup typescript tsconfig.json like this:

  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "baseUrl": ".",

     "paths": {
      "*": [
        "*",
        "src/*"
      ]
    }
  }

and importing like this:

import { HomePage } from 'pages/home/home.page';

but the typescript compiler gives me this error inside the IDE ( "Cannot find module 'pages/home/home.page'

When executing the ionic app (with ionic serve) this is the error I get:

Error: Cannot find module "pages/home/home.page"
    at Object.<anonymous> (http://localhost:8100/build/main.js:81745:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:104718:70)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at http://localhost:8100/build/main.js:66:18
    at http://localhost:8100/build/main.js:69:10

The idea I would like to setup is to use absolute paths starting from src/ and then using the folders structure like a namespace path:

So if the path of the component is root/src/pages/home/home.page

Import components using this:

import { HomePage } from 'pages/home/home.page';
import { LoginPage } from 'pages/login/login.page';

The HomePage component is this:

@Component({
  selector: 'home-page', 
  templateUrl: 'home.page.html'  
})

export class HomePage {

    // Array of pages for main menu
    pages: Array<{ component: any, name:string }>;

    constructor(public navCtrl: NavController) {
        // set our app's pages
        this.pages = [
            { component: LoginPage, name: 'Login' },
            { component: SyncPage, name: 'Sync Service' },
            { component: FilesPage, name: 'Selecting a file' },
        ];
    }

    gotoPage(page) {
        this.navCtrl.push(page.component);
    }

}

Any idea of what I'm doing wrong?

Thanks in advance

Answer 1

I'm having the same issue. On some preliminar test what seems to be working for me is a slight change on your tsconfig.json:

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

edit: it works on browser, but tscompiler tells that it can't find the modules :|