Question

我目前正在开发一个Angular 4项目，该项目涉及开发外部UI组件库（非常类似于“ngx-bootstrap”）。

将两者分开是非常重要的，因为稍后将在其他Angular 4项目中使用所述UI组件库。

我注意到大多数图书馆是预建的，然而，单独构建它们（至少现在）是太麻烦了，我宁愿同时处理它们，我的第一个想法就是简单地导入.ts文件并从父文件中编译它们项目

我尝试使用npm link来实现此功能，但在线阅读时，似乎不推荐使用此方法。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/linked-library.md

我很想知道我有什么选择来实现这个功能。

另一个重要的事情是在外面提供源代码，因为库将在其他项目中使用和开发。

Answer 1

您可以使用ng-packagr轻松构建库。

请遵循这篇文章。 https://medium.com/@ngl817/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

你会得到一些想法。我觉得这适合你。只需创建要用作库的组件并将其导出即可。

安装angualr / cli npm install @angular/cli -g
创建组件ng new my-component-library
创建一个模块ng generate module modules/header [将充当库的模块]
创建组件ng generate component modules/header
导出标题组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent // <-- this!
  ]
})
export class HeaderModule { }

安装ng-packagr npm install ng-packagr --save-dev
根据ng-packagr文档，我们需要向项目中添加两个文件，ng-package.json和public_api.ts。我们将使用ng-package.json配置n-packagr并告诉它在哪里找到我们的public_api.ts文件，我们将用它来导出组件库的功能模块。（注意：public_api.ts是Angular组件库使用的约定。）

将以下内容添加到ng-package.json：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

从header.module.ts

public_api.ts

export * from './src/app/modules/header/header.module'

现在我们将向我们的package.json添加一个打包程序脚本，我们可以根据ng-ng-packagr的配置告诉package.json打包我们的库。另外，将private切换为false，以便您可以在需要时发布库。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"
},
"private": false

现在好的东西。运行npm run packagr，一旦完成该过程，您将在项目根目录中找到dist文件夹。这是您的组件库。完全自给自足，根据最佳实践进行包装，并准备将它的红色标题照亮世界。

要PACK，请运行npm pack dist，否则您可以直接发布npm publish dist/

在npm发布

使用npm登录登录npm帐户后，您可以使用npm publish dist发布组件库。请确保您有一个唯一的包名称（提示：可以采用my-component-library）。发布后，您将能够使用npm install my-component-library从npm安装组件库。

使用组件库

安装完成后，您可以将头部组件导入任何应用程序的app.module.ts，方法是将其包含在@NgModule导入数组中......

import { HeaderModule } from 'my-package-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HeaderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在模板中使用其选择器，就像在应用程序中使用组件一样。

来源medium.com

在处理依赖于它的项目时构建Angular 4库

1 个答案:

在npm发布

使用组件库