首页 文章

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

提问于
浏览 次
1

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

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

我已经为import语句和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>
<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文件中我也用上面的导入尝试了 Map 中的所有这些变化，我也对包部分做了多个变化，没有一个解决了这个问题：

'@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
  }
}
angular typescript npm systemjs

2 回答

  • 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如何找到 main 文件的 .d.ts 文件 . 如果您的 main 是 test.js ，那么这应该有效：

    "types": "test.d.ts"

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

    有关更多详细信息，请参阅typescript手册中的publishing modules部分 .

    回复于
  • 0

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

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

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

    import { Test } from '@oval/test';
    回复于

相关问题