Angular Highcharts - Configuración del entorno

Este tutorial lo guiará sobre cómo preparar un entorno de desarrollo para comenzar su trabajo con Highcharts y Angular Framework. En este capítulo, discutiremos la configuración del entorno requerida para Angular 6. Para instalar Angular 6, necesitamos lo siguiente:

  • Nodejs
  • Npm
  • CLI angular
  • IDE para escribir su código

Nodejs debe ser mayor que 8.11 y npm debe ser mayor que 5.6.

Nodejs

Para verificar si nodejs está instalado en su sistema, escriba node -ven la terminal. Esto le ayudará a ver la versión de nodejs actualmente instalada en su sistema.

C:\>node -v
v8.11.3

Si no imprime nada, instale nodejs en su sistema. Para instalar nodejs, vaya a la página de iniciohttps://nodejs.org/en/download/ de nodejs e instale el paquete según su sistema operativo.

La página de inicio de nodejs se verá así:

Según su sistema operativo, instale el paquete requerido. Una vez que nodejs esté instalado, npm también se instalará junto con él. Para comprobar si npm está instalado o no, escriba npm -v en la terminal. Debería mostrar la versión de npm.

C:\>npm -v
5.6.0

Las instalaciones de Angular 6 son muy simples con la ayuda de CLI angular. Visite la pagina de iniciohttps://cli.angular.io/ de angular para obtener la referencia del comando.

Tipo npm install -g @angular/cli, para instalar angular cli en su sistema.

Obtendrá la instalación anterior en su terminal, una vez que Angular CLI esté instalado. Puede usar cualquier IDE de su elección, es decir, WebStorm, Atom, Visual Studio Code, etc.

Instalar Highcharts

Ejecute el siguiente comando para instalar el módulo highchart en el proyecto creado.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Ejecute el siguiente comando para instalar el módulo contenedor highchart en el proyecto creado.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

Agregue la siguiente entrada en el archivo highchartsApp.module.ts

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],