angular 2 typescript TS2307はプライベートnpmパッケージのモジュールを見つけることができません

Question

プライベートnpmリポジトリを介して社内での使用のためにいくつかのコンポーネントを作成しようとしています。しかし、これをnpm & systemjs経由でアプリに追加すると、TS2307がモジュール例外を見つけることができなくなってしまいます。

この簡単なテストを作成するには、angular.ioクイックスタートを使用しました。

import文とsystemjsの 'map'と 'packages'セクションでさまざまな名前のバリエーションを試しましたが、@ angularやrxjsなどで読み込むモジュールを取得できません。node_modulesを見ると、ファイルはすべて存在します。

Q：このシンプルなタイプスクリプトモジュールを正しくインポートして、TS2307のエラーを回避するにはどうすればよいですか？

package.json：

{ 
    ... 
    "dependencies": { 
    ... 
    "@oval/angular2-demo-test": "^1.0.0" 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

systemjs.config.js：

(function (global) { 
    System.config({ 
    ... 
    map: { 
     app: 'app', 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     ... 
     '@oval/test': 'npm:@oval/angular2-demo-test' 
    }, 
    packages: { 
     ... 
     '@oval/test': { 
     defaultExtension: 'js' 
     } 
    } 
}); 

app.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { Test } from '@oval/test'; 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [ 
     AppComponent, 
     Test 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

app.component.ts：

import { Component } from '@angular/core'; 
import { Test } from '@oval/test'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1><br/><test [value]="value"></test>' 
}) 

export class AppComponent { 
    value: string; 

    constructor() { 
     this.value = "result"; 
    } 
} 

コンソールエラー：ここ

app/app.component.ts(2,22): error TS2307: Cannot find module '@oval/test'. 
app/app.module.ts(4,22): error TS2307: Cannot find module '@oval/test'. 

私はモジュールを試してみて、インポートするために使用されてきたバリエーションです：私はまた、これらの変化の全てを試してみましたsystemjs.config.jsファイル内

import { Test } from '@oval'; 
import { Test } from '@oval/angular2-demo-test'; 
import { Test } from '@oval/angular2-demo-test/test.js'; 
import { Test } from '@oval/test.js'; 
import { Test } from './node_modules/@oval/angular2-demo-test/test.js'; 
import { Test } from '../node_modules/@oval/angular2-demo-test/test.js'; // this worked, although it obviously is not a realistic resolution 

上記の輸入品とのマップは、私にも問題：

'@oval/test': 'npm:@oval/angular2-demo-test' 
'@oval': 'npm:@oval/angular2-demo-test' 
'@oval': 'npm:@oval/angular2-demo-test/test.js' 
'@oval/angular2-demo-test': 'npm:@oval/angular2-demo-test' 
'@oval/angular2-demo-test': 'npm:@oval/angular2-demo-test/test.js' 

私はモジュールを解決したどれもあまりにもパッケージのセクションに複数のバリエーションを行っていますこのように見えるロードしよう：

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'test', 
    template: '<div>Test value: {{value}}</div>' 
}) 

export class Test { 
    @Input() value: string; 
} 

作成されたNPMパッケージには含まれています：

• test.ts
• test.js
• test.js.map
• パッケージを。 json
• readme.md
• node_modules/

パッケージに入力用フォルダも含めてみましたが、これは違いはありません。

ありがとうございます。

tsconfig。要求されたとしてJSON：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
    } 
} 

Answer 1

app/app.component.ts(2,22): error TS2307: Cannot find module '@oval/test'. 

これはtypescriptですコンパイルエラーで、systemjsは（も、あなたは私はあなたがいない推測され、typescriptですためsystemjsプラグインを使用していない限り）コンパイル時に使用されていません。

npm（パブリックまたはプライベートに関係なく）を使用してtypescriptモジュールを公開する場合は、そのモジュールの宣言ファイル（.d.ts）をそのユーザーに提供する必要があります。

最初にtsc -dでモジュールをコンパイルする必要があります。.d.tsの宣言ファイルがコンパイルされた.jsファイルと一緒に配布される必要があります。

はその後、typescriptです2.0のためには、JavaScriptファイルmainため.d.tsのファイルを検索する方法を教えてくれます活字体package.jsonファイルをモジュールに1行を追加する必要があります。あなたのmainがtest.jsであれば、これは動作するはずです：

"types": "test.d.ts" 

をまた、あなたはあなたのパッケージにtest.tsファイルを配布する必要はありません。

詳しくは、のtypecriptハンドブックのセクションを参照してください。

Answer 2

（テストクラスのdeclerationが含まれています）、あなたのメインファイルは、test.jsであれば、このようなsystemjs.config.jsを設定しよう：

'@oval/test': { 
     main: 'test.js', 
     defaultExtension: 'js' 
} 

次に、あなたが使用してインポートすることができるはず：

import { Test } from '@oval/test';