无法将我本地开发的 Angular 模块导入 Angular 应用程序

Question

我正在考虑使用this Yeoman generator 作为一个包含一些我可以发布的可重用表单组件的迷你项目的启动器。生成器构建一个模块和一个示例组件、指令、管道和服务配置为使用 (you can see the template files for the generator here)。

然后我使用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 目录。我认为这意味着正在导入非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

您是否尝试在您的代码上运行 watch（类似于“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 { }