使用Angular Cli如何创建Angular私有库详解
前言
在实际开发中，会发现我们好多工作都是重复的，在代码层面，发现好多代码是可以被重用的。这样我们就可以建一个库，类似于java的库，来提高工作效率。
下面话不多说了，来一起看看详细的介绍吧
创建Angular项目
打开命令行终端， cd 到用于创建应用的目录下，执行创建Angular项目命令：
ng new arsprojects -S
此命令将会创建一个新的Angular项目，文件夹名为 arsprojects 。 -S 参数表示不创建测试文件。我们创建的ng库都将依托于 arsprojects 项目，它只是作为ng库的容器存在，不需要建立测试。
用IDE打开 arsprojects 项目。
看到的文件结构就是我们常用的Angular项目结构。平时我们开发Angular项目，就是在 src/app 目录下进行的。
我们想建的是一个ng库，它和原来的Angular项目还是有一定差异的，ng库不需要操作 src/app 下的内容。
创建一个组件库
ng g library ars-components -p ars
g 是generate的简写方式， library 表示我们创建的是一个库。 -p ars 表示我们创建的库里面的组件是以 ars 开头的。例如我们创建一个checkbox组件，那么他的selector就是 ars-checkbox ，在HTML中通过标签来使用我们组件。
执行完该命令后，在ide中会发现，在我们的arsprojects中多了一个 projects 文件夹，里面是我们刚创建的 ars-components 。
同时，我们一开始创建arsprojects项目时创建的angular-cli.json也会被修改。里面会增加 ars-components 的项目信息。
"ars-components": {
"root": "projects/ars-components",
"sourceRoot": "projects/ars-components/src",
"projectType": "library",
"prefix": "ars",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ars-components/tsconfig.lib.json",
"project": "projects/ars-components/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/ars-components/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ars-components/src/test.ts",
"tsConfig": "projects/ars-components/tsconfig.spec.json",
"karmaConfig": "projects/ars-components/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ars-components/tsconfig.lib.json",
"projects/ars-components/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "arsprojects"
同时会在 tsconfig.json 中创建 paths 选项。
"paths": {
"ars-components": [
"dist/ars-components"
]
通过修改tsconfig.json配置，可以让我们方便的使用ars-components库。
创建web站点项目
ng g application arswebsite --prefix web
此命令通过 application 脚手架创建一个名为 arswebsite 的项目，selector前缀为 web 。在ide中发现在ars-commponents同级目录下创建了arswebsite和arswebsite-e2e两个文件夹。
运行项目
在运行项目前，先做一些小改动，用于区分项目。
修改 projects/arswebsite/src/app/app.component.html 为
<h1>ArsWeb</h1>
修改 src/app/app.component.html 为
<h1>Main Angular App</h1>
启动项目
ng serve
打开浏览器，访问 http://localhost:4200。
另打开一个终端，执行命令
ng serve arswebsite --port 4201
打开浏览器，访问 http://localhost:4201。
此时会发现，访问了两个不同的项目内容。
在ng库中创建新组件
cd projects/ars-components/src/lib ng generate component checkbox --project=ars-components
这样就会在我们的ars-components库中创建一个checkbox组件，组件的selector为ars-checkbox
编译组件
cd yourfolder/arsprojects ng build ars-components
会在dist目录下生成ars-components编译后的内容。
安装组件
编译后的组件，想要使用，需要现在本地安装。
npm install dist/ars-components
使用组件
在arswebsite中使用ars-components组件，此时和使用其他第三方组件没有任何区别。
website/src/app/app.moudle.ts 中引入 ArsComponentsModule :
import { ArsComponentsModule } from 'ars-components';
....
imports: [
BrowserModule, ArsComponentsModule
],
这样就可以在arswebsite中直接使用自定义库中的库组件了。
arswebsite/src/app/app.component.html 添加自定义组件
<ars-checkbox></ars-checkbox>
总结
在使用Angular cli创建库总体来说还是很方便的，创建库的意义就是让我们在实际开发过程中，总结的一些可以被复用的代码形成一个可被共享的资源，从而提高效率。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对来客网的支持。
