如何使用Angular Cli创建Angular私有库

前言

在实际开发中，我们会发现我们的很多工作都是重复的，在代码层面，我们发现很多代码都是可以重用的。这样，我们可以构建一个类似于java库的库，来提高工作效率。

下面就不多说了，我们来看看详细的介绍

创建角度项目

打开命令行终端，cd到创建应用程序的目录，执行命令创建Angular项目：

这个命令将创建一个名为arsprojects的新的Angular项目。-S参数表示不会创建测试文件。我们创建的所有ng库都将依赖于arsprojects，它只作为ng库的容器存在，因此不需要构建测试。

用IDE打开arsprojects项目。

我们看到的文件结构是常见的Angular项目结构。通常，我们在src/app目录下开发Angular项目。

我们想要构建的是一个ng库，它不同于最初的Angular项目。ng库不需要操作src/app下的内容。

创建组件库

Ng g library ars-components -p arsg是generate的缩写，library意味着我们正在创建一个库。-p ars意味着我们创建的库中的组件从ars开始。例如，如果我们创建一个复选框组件，它的选择器是ars-checkbox，我们通过HTML中的标签来使用我们的组件。

执行此命令后，您会发现在我们的arsprojects中有一个额外的项目文件夹，其中包含我们刚刚创建的ars组件。

同时，我们第一次创建arsprojects项目时创建的angular-cli.json也将被修改。将添加ars组件的项目信息。

ars-components ' : { ' root ' : ' project/ars-components '，' source root ' : ' project/ars-components/src '，' projectType': 'library '，' prefix': 'ars '，' architect ' : { ' build ' : { ' builder ' : ' @ angular-dev kit/build-ng-packar : build '，' options ' 33: { ' tsConfig ' : '

path ' : { ' ars-components ' :[' dist/ars-components ']通过修改tsconfig.json配置，我们可以方便地使用ars-components库。

创建网站项目

这个命令通过应用程序支架创建一个名为ars网站的项目，选择器前缀是web。在ide中的ars-com组件的同一级别目录中创建了两个文件夹，即ars网站和ars网站-e2e。

运行项目

在运行项目之前，做一些小的更改来区分项目。

修改项目/ars网站/src/app/app . collaboration . html阅读

h1arweb/h1修改src/app/app.collaboration.html阅读

h1主角度App/h1启动项目

打开浏览器，访问http://localhost:4200。

打开另一个终端并执行命令

在ngserve ars网站-端口4201打开浏览器，访问http://localhost:4201。

此时，您会发现您已经访问了两个不同的项目内容。

在ng库中创建一个新组件

Cd项目/ars-组件/src/lib ng生成组件复选框-项目=ars-组件。这将在我们的ars组件库中创建一个复选框组件。组件的选择器是ars-复选框

编译组件

CD您的文件夹/ars project sng build ars-components将在dist目录中生成ars-components的编译内容。

安装组件

编译的组件，如果你想使用它们，现在需要安装在本地。

npm安装dist/ars使用的组件-组件

ars网站中ars-components组件的使用与其他第三方组件的使用没有什么不同。

网站/src/app/app.moudle.ts引入了ArsComponentsModule :

从“ars-components”导入{ arscomponents module }；导入：【浏览器模块，arscomponentmodule】，这样自定义库中的库组件就可以直接在ars网站中使用。

Ars网站/src/app/app.component . html添加自定义组件

ars-复选框/ars-复选框摘要

一般来说，使用Angular cli创建库非常方便。创建库的意义在于使一些在实际开发过程中总结的可重用代码形成共享资源，从而提高效率。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。