随着 Angular 14 版本的发布，引入了独立组件，以及++NgModule++变得可选项；促进构建和构建代码库的新方法。
在本文中，我将创建一个图表，并了解如何使用和集成 Angular 独立组件以及++官方 Highcharts Angular 包装器++。让我们开始吧。
要使用最新版本的 Angular 创建项目，首先使用以下命令更新 angular-cli 包：
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest
对于这个项目，我们使用：
·Angular 14.
·Highcharts V10.1.0.
++·++++Highcharts-Angular++.
该项目使用 Angular 应用程序环境和工作区进行设置，其设置如下：
·Node: 14.17.0
·npm 8.3.1
·Angular CLI: 14.0.2.
使用 Highcharts 设置 Angular 项目
1.如果你不熟悉这种类型的环境，官方 Angular 文档描述了如何设置++本地环境工作区++，以及有关++独立组件的++更多信息。
2.要安装highcharts angular和highcharts库，请运行以下说明：npm install highcharts angular--save。
3.要导入包，请转到app.module.ts文件，然后从highchartsangular包导入模块HighchartsChartModule。
4.要构建Highcharts图表，请安装Highcharts: npm install Highcharts--save。
5.我们将app.compoent.ts声明为一个独立组件，并在导入数组中导入HighchartsChartModule，而不是NgModule（可选）。应用程序级依赖项，如路由、main.ts中的依赖项注入配置以及app.component.ts或任何其他组件中的组件级。
6.从main.ts引导应用程序。
7.点击这个++Stackblitz项目++找到带有代码的完整工作示例。以下是最终结果：
