Question

我正在尝试创建一个与多个组件一起分发的Angular库，但我无法使其工作。它只适用于一个组件。这就是我为一个组件制作它的方式：

我有一个名为sample-library的文件夹。在 src 里面，我有：

的package.json ：

{
  "name": "sample-library",
  "version": "0.1.0",
  "author": {
    "name": "IG"
  },
  "keywords": [
    "angular"
  ],
  "license": "MIT",
  "main": "sample-library.umd.js",
  "module": "sample-library.js",
  "jsnext:main": "sample-library.js",
  "typings": "sample-library.d.ts",
  "peerDependencies": {
    ...
  }
}

tsconfig.es5.json ：

{
  "compilerOptions": {
    "declaration": true,
    "module": "es2015",
    "target": "es5",
    "baseUrl": ".",
    "stripInternal": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "outDir": "../build",
    "rootDir": ".",
    "lib": [
      "es2015",
      "dom"
    ],
    "skipLibCheck": true,
    "types": []
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "skipTemplateCodegen": true,
    "flatModuleOutFile": "sample-library.js",
    "flatModuleId": "sample-library"
  },
  "files": [
    "./index.ts"
  ]
}

index.ts ：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SampleComponent } from './sample.component';

export * from './sample.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SampleComponent
  ],
  exports: [
    SampleComponent
  ]
})
export class SampleModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SampleModule,
      providers: []
    };
  }
}

我还有 sample-library.component.hml ， sample-library.component.scss 和 sample-library.component.ts 在src内。

这种方式可以正常工作。但我不知道如何按照类似的方式在同一个库中添加另一个组件。有什么想法吗？

Answer 1

据我所知，htere并非“标准”的做法：我从未在文档中看到任何内容。无论如何，有一些博客文章，有教程：

Answer 2

您可以在ngModule exports参数中添加任意数量的组件，例如：

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SampleComponent,
    SampleComponent2,
  ],
  exports: [
    SampleComponent,
    SampleComponent2,
  ]
})

这里的工作示例： https://github.com/plone/plone.restapi-angular/blob/master/src/module.ts#L118

我建议您不要在index.ts中实施ngModule，而是在module.ts和index.ts这样的单独文件中，只需导出所有项目（ngModule，组件，服务，等）。

如何创建要与多个组件一起分发的Angular库

2 个答案: