Relative paths. baseUrl and paths not working on ionic2 - angular2

Question

I've been reading on similar stack overflows but I haven't been able to figure it out. I must be missing a little step.

My goal is to be able to do:

import { Logger } from 'logging'

instead of

import { Logger } from '../../modules/logging'

My tsconfig looks like this:

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

My folder structure is something like

src
--- app
------- logging
--------------- index.ts (contains exports for the provider and the ngModule)
--------------- logger.provider.ts (contains an injectable provider)
--------------- logging.module.ts (contains the ngModule)
--- app.module.ts

The index basically has this:

export { LoggingModule } from './logging.module';
export { LoggerProvider } from './logger.provider';

Of course I omitted files from the structure. The app.module.ts is my entry class where I'm trying to import my 'logging' module. Visual Studio Code doesn't complain about my imports.

//import { FIREBASE_CONFIG } from 'configs';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AngularFireModule } from "angularfire2";
import { LoggingModule } from 'logging'; 
import { PostsModule } from 'posts';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    PostsModule,
    LoggingModule
    //AngularFireModule.initializeApp(FIREBASE_CONFIG),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

As I said VSC doesn't show any errors but when I launch the app in the browser I get:

Error: Cannot find module "logging"
    at Object.<anonymous> (http://localhost:8100/build/main.js:82202:7)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:105047: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

I really don't want to fall back to the long relative routes because 1) it's tedious and 2) would make refactoring a nightmare when the app grows.

Thanks!

Answer 1

I suspect moduleResolution which is set to node might be causing the issue. Change it to classic and see if it is resolved.

"compilerOptions": {
    "moduleResolution": "classic"

Take a look into this issue . Hope it solves the error.