DZone>Web Dev Zone>NgxSimpleCharts Angular库的多个入口点
NgxSimpleCharts Angular库的多个入口点
用 "ng generate library ngx-simple-charts "创建的Angular库是一段单一的代码。了解如何让Angular编译器将库的代码分割成模块。
-
1月10日，22 - Web Dev Zone -教程
喜欢 (2)
评论
保存
鸣叫
3.56K浏览次数
加入DZone社区，获得完整的会员体验。
Angular库可以发展到很大的规模。用 "ng generate library ngx-simple-charts "创建的Angular库是一段单一的代码，它将被包含在第一个包含/使用它的模块中。那个模块很可能会影响到最初的有用的绘画。
为了解决这个问题，可以使用多个入口点。这些入口点提供的功能是在模块中只包括入口点的代码。懒加载模块可以包括其他入口点的代码。这使得将代码分散到使用它的模块中成为可能，并将模块的大小降低到必要的大小。
Ngx-Simple-Charts库是本文中使用的例子。使用它的项目是AngularPortfolioMgr。关于创建ngx-Simple-charts的第一次迭代的文章可以在这里找到。
具有多个入口点的简单图表
该库有一个新的结构。
ngx-simple-charts/projects/ngx-simple-charts
/bar
/line
/src
- 条形图 "目录是条形图功能的入口点。
- line "目录是线图功能的入口点。
- src "目录是通用功能的入口点，目前是一个占位符服务。
package.json看起来像这样。
JSON
{
"name": "ngx-simple-charts",
"version": "13.1.0",
"license": "Apache License Version 2.0",
"peerDependencies": {
"@angular/common": "^13.0.0",
"@angular/core": "^13.0.0",
"rxjs": "^7.4.0"
},
"dependencies": {
"d3-array": "^3.0.0",
"d3-axis": "^3.0.0",
"d3-brush": "^3.0.0",
"d3-color": "^3.0.0",
"d3-format": "^3.0.0",
"d3-interpolate": "^3.0.0",
"d3-scale": "^4.0.0",
"d3-selection": "^3.0.0",
"d3-shape": "^3.0.0",
"d3-time-format": "^4.0.0",
"d3-transition": "^3.0.0",
"tslib": "^2.3.1"
}
}
peerDependencies "定义了应用程序所需的库，包括库。
dependencies'定义了整个库使用的库。
在bar目录下是ng-package.json。
JSON
{
"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "./public-api.ts"
}
}
ng-package.json告诉编译器这是一个入口点，并注册了该入口点的公共api。
在bar目录中是public-api.ts。
TypeScript
export * from './src/lib/sc-bar-chart/sc-bar-chart.component';
export * from './src/lib/ngx-bar-charts.module';
export * from './src/lib/sc-bar-chart/model/chart-bars';
这个文件声明了入口点的公共api。在这种情况下，组件、模块和数据的输入接口。Angular Cli的构建会在入口点的依赖关系中包含所需的部分库。
类似的文件可以在库的行目录中找到。
在AngularPortfolioMgr项目中使用该库
在这个package.json中是包含在项目中的Ngx-Simple-Charts库。
JSON
"dependencies": {
...
"@angular/router": "~13.0.0",
"ngx-simple-charts": "^13.1.0",
"material-design-icons": "3.0.1",
...
},
这使得该库在项目中可用。
使用酒吧入口点
bar入口点在portfolios.module.ts中被导入。
TypeScript
import { NgxBarChartsModule } from 'ngx-simple-charts/bar';
@NgModule({
declarations: [OverviewComponent, NewPortfolioComponent,
AddSymbolComponent, PortfolioTableComponent,
PortfolioChartsComponent, ProdConfigComponent,
DevConfigComponent],
imports: [
...
MatCheckboxModule,
NgxBarChartsModule,
PortfoliosRoutingModule
],
entryComponents: [NewPortfolioComponent],
providers: [DevAppInfoService, ProdAppInfoService,
{ provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor, multi: true }],
})
export class PortfoliosModule { }
这个导入声明了'ngx-simple-charts/bar'入口点的'NgxBarChartsModule'。
在'@NgModule'中，'NgxBarChartsModule'被导入'PortfoliosModule'。
该库的''组件然后被用于模块的组合图表组件中。
使用线条入口点
线条入口点在portfolio-detail.module.ts中被导入。
TypeScript
import { NgxLineChartsModule } from 'ngx-simple-charts/line';
@NgModule({
declarations: [PortfolioComponent, SymbolComponent],
imports: [
...
BaseModule,
NgxLineChartsModule,
MatCheckboxModule,
...
],
})
export class PortfolioDetailModule { }
该导入声明了'ngx-simple-charts/line'入口点的'NgxLineChartsModule'。
在'@NgModule'中，'NgxLineChartsModule'被导入'PortfolioDetailModule'。
该库的''组件然后被用于该模块的符号组件中。
看一下结果
AngularPortfolioMgr项目在package.json中有这些命令。
JSON
"scripts": {
...
"build-stats": "ng build --localize
--configuration production --stats-json",
"analyse": "webpack-bundle-analyzer dist/manager/de/stats.json",
...
}
通过命令 "npm run build-stats "运行构建，创建一个 "stats.json "文件。
通过'npm run analyze'命令，'webpack-bundle-analyzer'被启动，并在浏览器中以可视化格式显示'stats.json'文件的内容。
结果看起来是这样的。
在 portfolios.模块中，可以看到条形图的'd3-scale'代码，在 portfolio-detail.模块中，显示了'ngx-simple-charts-line'代码。
总结
Angular能够创建具有多个入口点的库。这使得Angular可以在其模块中只放置所需入口点的代码。这可以将模块缩小到它们运行所需的最小尺寸，并且可以通过懒人加载模块提供快速的初始加载。创建一个具有多个入口点的Angular库，在Angular Cli中变得非常容易。
主题。
angular, 库, typescript, angular cli, webpack, angular模块
经Sven Loesekann授权发表于DZone。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
