2016-12-24 7 views
2

私は同様のスタックオーバーフローで読んできましたが、私はそれを理解することができませんでした。私はちょっとしたステップを欠いているに違いない。相対パス。 baseUrlとionic2上で動作しないパス - angular2

私の目標が行うことができるようにすることです:

import { Logger } from 'logging' 

代わりの

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

私のTSconfigは、次のようになります。

{ 
    "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 
    } 
} 

マイフォルダ構造は

のようなものです
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 

指数は、基本的には、このあります

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

はもちろん、私は構造からファイルを省略しました。 app.module.tsは、私の 'ロギング'モジュールをインポートしようとしている私のエントリークラスです。 Visual Studioコードは、私のインポートについて不平を言っていません。

//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 {} 

私はVSCがエラーを示していないが、私は私が手ブラウザでアプリを起動したときに言ったように:

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 

私は本当に戻って長い相対ルートに落ちるしたくありませんなぜなら、1)退屈で、2)アプリが成長するときにリファクタリングが悪夢になるからです。

ありがとうございます!

+0

同じプロジェクトから独自のモジュールをインポートする場合は、相対URLを使用する必要があります。私はあなたが 'package.json'にリストされたモジュールであるnpmからインストールされていれば、相対URLなしでインポートしました。 – adriancarriger

+1

'' app''で '' tsc --traceResolution''を試してください – raj

+0

https://paste.ee/p/bXxZx – yafrack

答えて

0

moduleResolutionnodeに設定されていると思われることが原因で問題が発生する可能性があります。 classicに変更し、解決されているかどうかを確認してください。

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

このissueをご覧ください。それがエラーを解決することを願っています。

+0

こんにちは。ありがとう。私は自分自身を追加しなかった、それはイオン設定の一部である。事は、それを古典に変えることはすべてを破ることです。すなわち:名前 'Observable'を見つけることができません、名前 'AngularFireDatabase'などを見つけることができません – yafrack

+0

パスにnode_modulesフォルダが含まれていませんか? – raj

+0

はいそれが追加されます:/ – yafrack