angular 2 typescript TS2307 找不到私有 npm 包的模块

Question

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

我使用angular.io快速入门来创建这个简单的测试。

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

问：如何成功导入这个简单的 typescript 模块并避免 TS2307 错误？

包.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;
}

创建的 npm 包包括：

• 测试文件
• 测试.js
• 测试.js.map
• 包.json
• 自述文件
• 节点模块/

我也试过在包中包含一个 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编译模块，这将创建.d.ts声明文件，这些文件需要与已编译的.js文件一起分发。

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

"types": "test.d.ts"  

此外，您不需要随包分发test.ts文件。

有关更多详细信息，请参阅 typescript 手册中有关发布模块的部分。

Answer 2

如果您的主文件（包含Test类的声明）是test.js，请尝试像这样配置 systemjs.config.js：

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

然后你应该能够使用导入：

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