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