angular 2 typescript TS2307无法找到私人npm包的模块

Question

我一直在尝试创建一些组件供企业内部使用，以便通过我们的私人npm存储库共享。但是，当通过npm & systemjs添加这些应用程序时，我不断收到TS2307找不到模块异常。

我用angular.io quickstart来创建这个简单的测试。

我已经尝试了导入语句和systemjs的'map'和'packages'部分的多种名称变体，但无法获取模块以根据@angular或rxjs等加载。当我查看node_modules时，文件夹和文件都存在。

问：如何成功导入这个简单的打字稿模块并避免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'. 

以下是我已经习惯了尝试，并导入模块的变化：

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 

在systemjs.config.js文件我也试图在所有这些变化上述进口的地图，我也作出了多种变化的包款也没有一个已经解决了这个问题：

'@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; 
} 

时生成故宫套餐包括：

• test.ts
• test.js
• test.js.map
• 包。 json
• readme.md
• node_modules/

我也试过在软件包中包括一个typings文件夹，但这没什么区别。

谢谢你的时间。

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'. 

这是打字稿编译错误，并且systemjs不是在编译时使用（当然，除非你正在使用systemjs插件打字稿，我猜你不这样做）。

如果您使用npm发布typescript模块（无论是公共还是私有），您需要为该用户提供该模块的声明文件（.d.ts）。

首先，你必须编译tsc -d模块，这将创造出需要与编译.js文件一起分发.d.ts申报文件。

然后，对于打字稿2.0，您需要添加一行到模块package.json文件，它将告诉打字稿如何找到main javascript文件的.d.ts文件。如果您main是test.js，那么这应该工作：

"types": "test.d.ts" 

而且，你不需要分发test.ts文件，你的包。

欲了解更多详情，请参阅typcript手册中有关publishing modules的部分。

Answer 2

如果你的主文件（其中包含decleration为测试类）test.js尝试配置这样systemjs.config.js：

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

那么你应该可以使用导入：

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