angular 2 typescript TS2307无法找到私人npm包的模块
我一直在尝试创建一些组件供企业内部使用,以便通过我们的私人npm存储库共享。但是,当通过npm & systemjs添加这些应用程序时,我不断收到TS2307找不到模块异常。angular 2 typescript TS2307无法找到私人npm包的模块
我用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
}
}
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的部分。
我一直在试图创建一个'.d.ts'文件,但仍然收到相同的错误,现在我怀疑我没有正确创建定义文件。我试图使用[dtsmake](https://www.npmjs.com/package/dtsmake),但只创建了一个空文件,只有一些评论。我假设我的d.ts文件应该看起来像这样'declare class Test {value:string; }这是正确的吗? – APW
是'.d.ts'文件应该包含这些声明,如果你的模块是typescript,那么编译器可以在编译为javascript时生成'.d.ts',你可以在命令行上使用'tsc -d' 。 – artem
奇怪的是,当我运行该行时,编译器会抛出一堆错误,TS1008,TS1005和TS1001。告诉我我的文件没有以导入开始,导入也没有以';'结尾。等我有更多的时间在周三进行调查。谢谢 – APW
如果你的主文件(其中包含decleration为测试类)test.js尝试配置这样systemjs.config.js:
'@oval/test': {
main: 'test.js',
defaultExtension: 'js'
}
那么你应该可以使用导入:
import { Test } from '@oval/test';
你试过从'@ oval/test/test'导入吗?你的'systemJS'表示defaultExtention是.js,所以如果你导入'@ oval/test/test',它应该导入'@ oval/test/test.js' – Supamiu
没有区别。如果我的systemjs将'@ oval/tests'指向test.js文件所在的文件夹'node_modules/@ oval/angular2-demo-test',我会希望import @ oval/test/test按照你的建议去做,但它仍然给出了错误 – APW
你可以添加你的tsconfig.json文件吗? – Supamiu