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

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

Приступим 🙂

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

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

Проект настроен с использованием среды приложения Angular и рабочей области со следующими настройками:

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

Настройте проект Angular с помощью Highcharts

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 внутри массива imports вместо NgModule (необязательно). Зависимости уровня приложения, такие как маршруты, внедрение зависимостей, настраиваются в main.ts и уровне компонента в app.component.ts или любом другом компоненте.

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

6. Загрузите приложение из main.ts.

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

bootstrapApplication(AppComponent);

7. Нажмите на этот Проект Stackblitz, чтобы найти полный рабочий пример с кодом. Вот окончательный результат:

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

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

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

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