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）进行比较时，我注意到两件事情

由于我使用npm link导入库以允许我在开发期间进行测试，因此导入了整个文件夹结构（而不仅仅是dist目录。我认为这意味着非dist TasksModule正在导入代码。如果我尝试导入my-test-library/dist，则会找不到模块错误。
与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的根目录并从那里导入模块，它运行正常。

有没有办法，使用npm link，只导入dist目录（在根目录下）？
我也不明白为什么将我的原始导入更新为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 { }

无法将我本地开发的Angular模块导入Angular app

2 个答案: