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

Question

我正在考慮使用這個Yeoman生成器作為一個迷你項目的入門者，該項目包含我可以發布的一些可重用的表單組件。 生成器構建模塊以及配置使用的示例組件，指令，管道和服務（ 您可以在此處查看生成器的模板文件 ）。

然后我使用npm link允許我在我的Angular應用程序中安裝生成的項目，這似乎工作正常，如下面從項目的node_modules目錄中所示;

然后我在Angular應用程序中將模塊導入到我的模塊中;

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"
  ]
}

根據這些項目或其他內容，我錯過了什么讓這個工作？ 謝謝！

編輯：sample。*。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

您是否嘗試在代碼上運行監視（類似“npm run watch”）？ 這將提供更好的錯誤消息。

假設這是你的index.ts文件或類似的文件（ https://github.com/jvandemo/generator-angular2-library/blob/master/generators/app/templates/index.ts ）我猜的是要么您的模塊未正確導出或導出之間存在某些循環依賴關系。 首先，嘗試更改index.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 { }