Graphiques Google angulaires - Configuration de l'environnement

Ce didacticiel vous expliquera comment préparer un environnement de développement pour commencer votre travail avec Google Charts et Angular Framework. Dans ce chapitre, nous aborderons la configuration de l'environnement requise pour Angular 6. Pour installer Angular 6, nous avons besoin des éléments suivants:

  • Nodejs
  • Npm
  • CLI angulaire
  • IDE pour écrire votre code

Nodejs doit être supérieur à 8,11 et npm doit être supérieur à 5,6.

Nodejs

Pour vérifier si nodejs est installé sur votre système, tapez node -vdans le terminal. Cela vous aidera à voir la version de nodejs actuellement installée sur votre système.

C:\>node -v
v8.11.3

S'il n'imprime rien, installez nodejs sur votre système. Pour installer nodejs, allez sur la page d'accueilhttps://nodejs.org/en/download/ de nodejs et installez le package en fonction de votre système d'exploitation.

En fonction de votre système d'exploitation, installez le package requis. Une fois nodejs installé, npm sera également installé avec lui. Pour vérifier si npm est installé ou non, tapez npm -v dans le terminal. Il devrait afficher la version du npm.

C:\>npm -v
5.6.0

Les installations angulaires 6 sont très simples à l'aide de la CLI angulaire. Visitez la page d'accueilhttps://cli.angular.io/ d'angle pour obtenir la référence de la commande.

Type npm install -g @angular/cli, pour installer angular cli sur votre système.

Vous obtiendrez l'installation ci-dessus dans votre terminal, une fois Angular CLI installé. Vous pouvez utiliser n'importe quel IDE de votre choix, c'est-à-dire WebStorm, Atom, Visual Studio Code, etc.

Installez Google Charts Wrapper

Exécutez la commande suivante pour installer le module Google Charts Wrapper dans le projet créé.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Ajoutez l'entrée suivante dans le fichier app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],