使用 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
模块:
nggeneratemodulemodules/header
创建header
组件:
nggeneratecomponent 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 // 导出组件
]
})
exportclassHeaderModule{ }
在应用中确保在使用HeaderComponent
组件之前导入 HeaderModule 模块并在@NgModule
的declarations
中声明。如果没有在exports
中导出HeaderComponent
,则组件能且只能在它的模块中使用,而不能在其他模块中使用。
实际操练
打开app.component.html
并替换为如下内容:
<app-header>SuchHeader</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]
})
exportclassAppModule{ }
现在使用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.tgz
,0.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