[转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

时间:2022-04-06 10:35:08

使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一。

项目目标

现在,我们一起创建一个简单的组件库。

首先,我们需要创建一个 header 组件。这没什么特别的,当然接下来会明白的。

我们能从中能得到什么收获?

  • 自动生成项目结构

  • 自动生成组件库的组件、模块和服务

  • 自动生成组件库的测试用例

  • 在打包组件库之前会自动生成对应的测试环境测试组件库中的组件

  • 自动打包组件库为 Angular Package 的标准格式

准备工作

首先,安装 Angular CLI ,如下所示:

npm install @angular/cli -g

Angular CLI 安装完成后,接着创建组件库

ng new my-component-library
ng-server 将会从组件库的目录开始启动项目

接下来,启动项目,如下:

ng serve --port 4200

在浏览器中输入 localhost:4200 ,可以看到:

页面显示是 Angular CLI 构建项目的默认展示

创建一个组件

使用 CLI 生成一个 header 组件,同时设置组件的选择器为 app-header,新建一个文件夹 modules 。

在 module 文件夹中创建一个 header 功能组件

创建 header 模块:

ng generate module modules/header

创建 header 组件:

ng generate component modules/header

这里会在 src/app/modules/header 文件夹生成如下文件:

  • header.component.css

  • header.component.html

  • header.component.spec.ts

  • header.component.ts

  • header.module.ts

定制组件 header 内容

打开 header.component.html 文件,并替换为如下内容:

<h1>
<ng-content></ng-content>
</h1>

美化 header 组件

设置组件 h1 标签的字体颜色为红色

h1 {
color: red;
}

从 module 中导出我们的组件

打开 header.module.ts 文件,并在 @NgModule 中添加 exports ,并导出 HeaderComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
HeaderComponent
],
exports: [
HeaderComponent // 导出组件
]
})
export class HeaderModule { }

在应用中确保在使用 HeaderComponent 组件之前导入 HeaderModule 模块并在 @NgModule 的 declarations 中声明。如果没有在 exports 中导出 HeaderComponent ,则组件能且只能在它的模块中使用,而不能在其他模块中使用。

实际操练

打开 app.component.html 并替换为如下内容:

<app-header>Such Header</app-header>

我们给 <app-header></app-header> 设置了内容 "Such Header" ,这个内容将会替换 header 模板中 <ng-conent></ng-content>占位符。

最后,需要导入 HeaderModule 到 AppModule 中,这样 app.component.html 才知道如何渲染 <app-header> 。

在 app.module.ts 文件的 imports 中添加 HeaderModule 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// 导入我们的模块
import { HeaderModule } from './modules/header/header.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HeaderModule // import it into our @NgModule block
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

现在使用 ng serve 启动本地服务,打开浏览器输入 localhost:4200 可以看到如下:

ng-packagr

n-packagr 是一个 node 库,它可以编译和打包 TypeScript 库为 Angular 包的标准格式。我们将会使用它来把我们的组件打包成 Angular 包标准格式的组件库,使得它可以在任意的 Angular 项目中使用。

在项目的根目录中执行 npm install ng-packagr --save-dev 安装 n-packagr ,这时将会开始下载 n-packagr ,同时在package.json 文件中的 devDependency 声明包依赖,我们可以在 npm scripts 中调用它。

根据ng-package文档得知,我们需要在我们的项目中添加两个文件,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"
}
}

并且,在 public_api.ts 文件中导出 header.module.ts

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

在 package.json 文件中的 scripts添加 "packagr": "ng-packagr -p ng-package.json" ,告诉 ng-packagr 根据 ng-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 文件夹,里面的内容就是我们生成的标准的 Angular 组件库的结构。

为本地开发打包组件库

我们可以在应用中使用 npm install 安装本地的开发包。进入 dist 目录执行 npm pack打包组件库,打包完成后,会在项目的根目录生成 my-component-library-0.0.0.tgz0.0.0来至于 package.json 文件中一部分。

在其他的 Angular 项目中有依赖你的组件库,则可以使用 `npm install ./path/dist/my-component-library-0.0.0.tgz 安装本地依赖包。

在 npm 网站上发布我们的组件库

使用 npm login 登录 npm 账号,然后使用 npm public 发布我们的组件库。需要注意的是,发布时需要确保我们定义的包名是唯一的(本例中使用:my-component-library)。发布成功后,就可以在我们的应用中使用 npm install my-component-library 安装和使用我们的组件库。

发布过程中遇到一个错误: Package name triggered spam detection; if you believe this is in error, please contact support@npmjs.com

解决方法: 修改包名

使用我们自定义的组件库

安装完成后,把组件导入到 app.module.ts ,并在 @NgModule 中的 imports 数组中添加导入的 HeaderModule 组件库...

import { HeaderModule } from 'my-package-name';//引入我们自定义的组件库
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HeaderModule // 在这里导入
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

在应用程序的模板中使用组件库中组件定义的选择器,使得组件库中的组件成为我们应用程序中的一部分。

 
// app.component.html
<h1>
{{ title }}
</h1>
<!-- 看这里,在这里使用 -->
<app-header></app-header>
<!-- end -->
原文地址:https://segmentfault.com/a/1190000010900969

[转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库的更多相关文章

  1. Angular CLI 创建你的第一个 Angular 示例程序

    第一步:安装 Angular CLI 你要使用 Angular CLI 来创建项目.创建应用和库代码,并执行多种开发任务,比如测试.打包和发布. 全局安装 Angular CLI. 要想使用 npm  ...

  2. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  3. 构建一个简单的Angular工程

    1.创建一个空的工程,之后用webstorm打开,添加一个bower.json文件: { "name": "AngularTpl", "depende ...

  4. 从零开始构建一个Reactor模式的网络库(二)线程类Thread

    线程类Thread是对POSIX线程的封装类,因为要构建的是一个Linux环境下的多线程网络库,对线程的封装是很必要的. 首先是CurrentThread命名空间,主要是获取以及缓存线程id: #if ...

  5. 构建一个类jq的函数库

    jqfree core var $ = function(selector, context) { return new $.fn.init(selector, context); }; $.fn = ...

  6. 从零开始构建一个Reactor模式的网络库(一) 线程同步Mutex和Condition

    最近在学习陈硕大神的muduo库,感觉写的很专业,以及有一些比较“高级”的技巧和设计方式,自己写会比较困难. 于是打算自己写一个简化版本的Reactor模式网络库,就取名叫mini吧,同样只基于Lin ...

  7. angular&sol;cli 常用指令

    1.安装@angular/cli npm install -g @angular/cli 2.更新@angular/cli npm uninstall -g @angular/cli npm cach ...

  8. 从Java角度理解Angular之入门篇:npm&comma; yarn&comma; Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  9. &lbrack;转&rsqb;Angular CLI 安装和使用

    本文转自:https://www.jianshu.com/p/327d88284abb 一. 背景介绍: 两个概念: 关于Angular版本,Angular官方已经统一命名Angular 1.x统称为 ...

随机推荐

  1. 项目管理利器——Maven

    假设公司要开发一个新的Web项目,使用目前流行的struts2.spring.MyBatis进行新项目开发.那么接下来首先要进行的工作就是各个框架的jar包的下载.大家通常的做法是先到struts2的 ...

  2. Bootstrap 教程

    Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT 的简介灵活的流行前段框架及交互组件集. 内容列表 Bootstrap 教程 Bootstrap 教程 Boot ...

  3. Springboot security cas整合方案-原理篇

    前言:网络中关于Spring security整合cas的方案有很多例,对于Springboot security整合cas方案则比较少,且有些仿制下来运行也有些错误,所以博主在此篇详细的分析cas原 ...

  4. Qt create 如何构建 ActiveX 控件?

    ActiveX.pro #------------------------------------------------- # # Project created by QtCreator 2018 ...

  5. 面试简单整理之web

    63.servlet是什么?运行过程? Servlet是一门用于开发动态web资源的技术. 运行过程: Servlet程序是由WEB服务器调用,web服务器收到客户端的Servlet访问请求后: ①W ...

  6. 2019-1-18 Spark 机器学习

    2019-1-18 Spark 机器学习 机器学习 模MLib板 预测 //有视频 后续会补充 1547822490122.jpg 1547822525716.jpg 1547822330358.jp ...

  7. 如何在Google Play商店发布多个版本apk

    原文:http://android.eoe.cn/topic/android_sdk 多种apk的支持是一个特点在Google Play,它允许你发布不同的APKs为你的应用匹配不同尺寸的设备.每个A ...

  8. wget全站抓取命令

    wget -r -p -np -k http://www.freebuf.com/ 忽视,避开robots.txt,加一个-e robots=off 用wget避开robots.txt的下载限制 wg ...

  9. R&lowbar;CNN

    https://blog.csdn.net/briblue/article/details/82012575 背景本篇论文的题目是 <Rich feature hierarchies for a ...

  10. 联想Thinkpad 遇到双系统 uefi Ubuntu无法进入的引导问题解决方案

    最近因为许多课程设计的需要,安装了Ubuntu双系统,但是一开始遇到了安装好了以后无法进入的问题,后来弄好后手残又把引导项给删了又要弄回去,反反复复很多次,网上的很多经验都十分过时,要么对最新的uef ...