無法將我本地開發的Angular模塊導入到Angular應用程序

Question

我正在尋找使用this Yeoman generator作爲包含我可以發佈的幾個可重用表單組件的迷你項目的入門者。生成器生成一個模塊和一個配置爲使用的示例組件，指令，管道和服務（you can see the template files for the generator here）。

然後，我使用npm link允許我在我的Angular應用程序中安裝生成的項目，該項目看起來工作正常，如下面從項目的node_modules目錄中所示;

我已經再導入模塊進入我的模塊我的角度應用程序中;

import { SampleModule } from 'my-test-library'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    NgbModule, 
    MomentModule, 
    SampleModule // <-- Imported Here 
    ], 
    declarations: [], 
    providers: [] 
}) 
export class TasksModule { } 

該模塊的進口導致錯誤Uncaught Error: Unexpected value 'SampleModule' imported by the module 'TasksModule'，我想不通爲什麼。

有兩兩件事比較我與其他第三方庫中導入庫時，我注意到（如ng-bootstrap）

1. 正如我已經使用npm link導入庫，讓我發展的整個過程中測試文件夾結構已導入（而不僅僅是dist目錄。我認爲，這意味着非測距碼是由TasksModule進口的。如果我試圖導入my-test-library/dist我得到一個模塊不能被發現的錯誤。
2. 不像ng-bootstrap我圖書館似乎缺少*.metadata.json文件在輸出中。

我的圖書館的tsconfig.json文件如下（持平發電機安裝）

{ 
    "compilerOptions": { 
    "noImplicitAny": true, 
    "module": "commonjs", 
    "target": "ES5", 
    "emitDecoratorMetadata": true, <-- Checked to ensure this was true 
    "experimentalDecorators": true, 
    "sourceMap": true, 
    "declaration": true, 
    "outDir": "./dist" 
    }, 
    "files": [ 
    "typings/index.d.ts", 
    "index.ts" 
    ], 
    "exclude": [ 
    "node_modules", 
    "dist" 
    ] 
} 

基於這些項目，或別的東西，我錯過什麼得到這個工作？謝謝！

編輯：。樣品* d.ts文件（如安裝後默認）

// sample.component.d.ts 
export declare class SampleComponent { 
    constructor(); 
} 

// sample.directive.d.ts 
import { ElementRef } from '@angular/core'; 
export declare class SampleDirective { 
    private el; 
    constructor(el: ElementRef); 
} 

編輯2 所以，我想符號鏈接的dist目錄（my-test-library/dist）至node_modules根，從那裏導入模塊，它工作正常。

1. 有沒有辦法使用npm link只導入dist目錄（在根目錄下）？
2. 我也不明白爲什麼更新我的原始導入到import { SampleModule } from 'my-test-library/dist';不起作用？

Answer 1

您是否嘗試在您的代碼上運行watch（例如「npm run watch」）？這將提供更好的錯誤消息。

假設這是你的index.ts文件或類似的文件（https://github.com/jvandemo/generator-angular2-library/blob/master/generators/app/templates/index.ts）我猜測是你的模塊沒有正確導出，或者你的導出中存在一些循環依賴關係。首先，嘗試更改索引中的以下四行。TS來自：

export * from './src/sample.component'; 
export * from './src/sample.directive'; 
export * from './src/sample.pipe'; 
export * from './src/sample.service'; 

到

export {SampleComponent} from "./src/sample.component"; 
export {SampleDirective} from "./src/sample.directive"; 
export {SamplePipe} from "./src/sample.pipe"; 
export {SampleService} from "./src/sample.service"; 

如果不工作，那麼試着改變你的出口秩序。如果仍然沒有運氣，那麼請嘗試共享整個文件夾的某個地方。謝謝，

Answer 2

在你的文件列表我沒有看到一個sample.module.ts，只有component，directive，pipe和service。如果您沒有輸入/提供這些文件的@ngModule修飾器，那麼您並未真正導入SampleModule。

的文件應該是這個樣子：

sample.modeule.ts

import { NgModule } from '@angular/core'; 
import { SampleDirective } from './sample.directive'; 
import { SampleComponent } from '../sample.component'; 
import { SamplePipe } from './sample.pipe'; 
import { SampleService } from './sample.service'; 

@NgModule({ 
    imports: [ ], 
    declarations: [ 
    SampleDirective, 
    SampleComponent, 
    SamplePipe 
    ], 
    providers:[SampleService], 
    exports: [ 
    SampleDirective, 
    SampleComponent, 
    SamplePipe 
    ] 
}) 
export class DayModule { }