简介
angular-library-starter-poc-1 是一个 Angular 库的起始模板，它使用了 Angular6 和 ng-packagr。
这个模板可以帮助你快速创建一个符合 Angular 标准的库，帮助你将组件、指令、服务、管道等打包成一个可发布的 npm 包。
本文将介绍如何安装和使用此模板，让你更容易地打造适合自己使用的 npm 包。
安装和使用
首先，你需要在本地安装 Angular CLI。如果你还没有安装，可以使用以下命令进行安装：
npm install -g @angular/cli
安装完成后，你可以通过以下命令来生成一个新的库：
ng new my-lib
这将为你创建一个新的 Angular 应用，并使用库的模板进行修改。
接着，在新建的项目中使用以下命令来安装 angular-library-starter-poc-1：
npm install angular-library-starter-poc-1 --save-dev
安装完成后，你需要在项目的根 package.json 文件中添加以下配置：
"scripts": {
"build": "ng-packagr -p ng-package.json"
},
"ngPackage": {
"lib": {
"entryFile": "public-api.ts"
}
}接下来，你需要在项目的 src 目录下创建一个 public-api.ts 文件，并将要导出的组件、指令、服务、管道等都放在其中。
以创建一个新的组件为例，你可以按以下方式编写 public-api.ts 文件：
export * from './app/my-component/my-component.component';
最后，在项目的根目录下创建一个 ng-package.json 文件，并输入以下内容：
{
"$schema": "./node_modules/ng-packagr/package.schema.json",
"lib": {
"entryFile": "public-api.ts"
}
}完成了这些步骤之后，你就可以使用以下命令对你的库进行构建了：
npm run build
构建完成后，构建的文件将会放在 dist 目录下，你可以将生成的文件夹发布到 npm 上供他人使用。
示例代码
创建组件
在 src/app/my-component 目录下，创建 my-component.component.ts 文件，内容如下：
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: '<h1>Hello world!</h1>'
})
export class MyComponentComponent { }在 public-api.ts 文件中输出该组件：
export * from './app/my-component/my-component.component';
使用组件
在 app.module.ts 中导入该组件：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - -------------------- - ---- ---------
-----------
------------- -
-------------
--------------------
--
-------- -
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在 app.component.html 中使用该组件：
<my-component></my-component>
总结
通过使用 angular-library-starter-poc-1，我们可以轻松地创建出符合 Angular 标准的库，并将它们整合到 npm 包中发布，在我们的项目中引用这些库。
如果你需要创建一个开源组件库，此模板将是一个不错的起点，同时也是学习如何制作 Angular 库的一个好的教程。
祝福你打造出更加优秀的 Angular 库！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726181e8991b448e88e9