С выпуском версии angular 14 были представлены автономные компоненты, а NgModule стал необязательным; облегчение нового способа построения и структурирования кодовой базы.

В этой статье мы создадим чарт и посмотрим, как использовать и интегрировать автономные компоненты angular вместе с официальной оболочкой Highcharts Angular .

Приступаем

Чтобы создать проект с последней версией Angular, для начала обновите пакет angular-cli следующими командами:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Для этого проекта мы используем:

• Угловой 14.
• Highcharts V10.1.0.
• Highcharts-Угловой .

• Узел: 14.17.0
• нпм 8.3.1
• Угловой интерфейс командной строки: 14.0.2.

1. Если вы не знакомы с этим типом окружения, в официальной документации Angular описано, как настроить рабочее пространство в локальной среде , и подробнее об автономном компоненте .

2. Для установки highcharts-angularбиблиотеки Highcharts выполните следующую инструкцию: npm install highcharts-angular --save.

3. Чтобы импортировать пакет, перейдите в app.module.tsфайл и импортируйте модуль HighchartsChartModuleиз highcharts-angularпакета.

4. Для построения диаграмм Highcharts установите Highcharts: npm install highcharts --save.

5. Мы объявляем app.compoent.tsкак отдельный компонент и импортируем HighchartsChartModuleвнутренний массив импорта вместо NgModule (необязательно). Зависимости уровня приложения, такие как маршруты, внедрение зависимостей, настраиваются в файле main.ts и уровне компонента в app.component.tsлюбом другом компоненте.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

Не стесняйтесь делиться своими мыслями и вопросами в комментариях ниже.

Посетите наш блог и узнайте больше о лучших советах по использованию Highcharts.

Автор: Харун Ансари

Харун Ансари — инженер по информатике. У него многолетний опыт работы с javascript, Angular и .NET. Он любит визуализацию данных и участвует в проектах с открытым исходным кодом. Следите за Харуном в твиттере @haroonansari1 и LinkedIn .