无法将我本地开发的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 { }