Question

我一直在尝试创建一些内部公司使用的组件，以便通过我们的私有npm存储库共享。但是，当通过npm＆amp; amp; systemjs到app，我一直得到TS2307无法找到模块异常。

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

我为import语句和systemjs＆＃39; map＆＃39;尝试了各种名称变体。和＆＃39;包＆＃39;部分，但无法按照@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;
}

创建的npm包包括：

test.ts
test.js
test.js.map
package.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编译模块，这将创建.d.ts声明文件，这些文件需要与已编译的.js文件一起分发。

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

"types": "test.d.ts"

此外，您不需要在程序包中分发test.ts文件。

有关详细信息，请参阅打字稿手册中的publishing modules部分。

Answer 2

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

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

然后你应该能够使用：

导入

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

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

2 个答案: