[Catatan] Upgrade NodeJS dan Instal AngularJS via Angular CLI (Error and Problem Solving)


17/07/2017 10:07:48 180 Web

Ini ialah catatan saat upgrade NodeJS untuk menginstal AngularJS via Angular CLI pada OS Ubuntu 16.04. NodeJs pada Ubuntu 16.04 saya sebenarnya sudah terpasang, namun versinya 4.2.6 sedangkan NPM versi 3.x.x. Untuk menggunakan AngularJS versi terbaru ternyata miniman versi NodeJS ialah 6.9.x dan NPM versi 3.x.x [1] sehingga kesimpulannya NodeJS harus di-upgrade sedangkan NPM aman. FYI untuk mengetahui versi NodeJS dan NPM ialah dengan perintah

Versi NodeJS

nodejs -v 

Versi NPM

npm -v

Tidak ada perintah khusus untuk upgrade NodeJS, sehingga upgrade ubuntu diawali dengan update dengan perintah sudo apt-get update dan upgrade sudo apt-get upgrade. Namun, setelah mengecek versi ternyata tidak ter-upgrade sehingga dapat disimpulkan repository ubuntu saya masih mengarah pada reposotory NodeJS yang lama.

Setelah browsing dan membaca dari [2][3] solusinya ialah dengan meng-unsintal versi yang lama dan meng-instal repository versi terbaru dan meng-instal kembali NodeJS. Berikut ialah langkahnya

Uninstal NodeJs

sudo npm apt-get purge nodejs npm

Menambahkan Repositori Instalasi NodeJs Versi 6.x

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

Instalasi NodeJs

sudo apt-get install -y nodejs

Setelah instalasi NodeJs saya kembali mengecek versi NodeJs dan NPM untuk memastikan versinya telah ter-upgrade dengan menggunakan perintah

$ nodejs -v && npm -v
v6.11.0
3.10.10

Ok. Baik versi NodeJS dan npm telah memenuhi syarat untuk menginstal @Angular/CLI. Selanjutnya ialah mengintal AngularJS.

Instalasi AngularJS/CLI

Untuk menginstal @angular/cli ialah dengan menggunakan perintah

$ sudo npm intall -g @angular/cli

Namun, saat saya enter untuk menginstal beberapa lama kemudian muncul pesan error sebagai berikut:

npm ERR! Linux 4.7.0-040700rc3-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "-g" "@angular/cli"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! file /home/rofilde/.npm/regexpu-core/1.0.0/package/package.json
npm ERR! code EJSONPARSE

npm ERR! Failed to parse json
npm ERR! No data, empty input at 1:1
npm ERR! 
npm ERR! ^
npm ERR! File: /home/rofilde/.npm/regexpu-core/1.0.0/package/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR! 
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! Please include the following file with any support request:
npm ERR!     /home/rofilde/Desktop/projects/angular/npm-debug.log

Setelah browsing dan menemunkan solusi disini [4] yakni kita harus meng-clean cache npm terlebih dahulu dengan perintah

npm cache clean

kemudian saya jalankan kembali perintah instalasi angular/cli seperti dibawah ini dan berhasil:

sudo npm install -g angular/cli

Verfikasi Angular CLI

Sedangkah untuk versifikasi Angular CLI dengan perintah berikut:

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.0
node: 6.11.0
os: linux x64

Instal AngularJs

Untuk menginstal AngularJs via Angular CLI ialah dengan menggunakan perintah

$ ng new NAMA_APP

misalkan nama aplikasinya helloApp sehingga

$ ng new helloApp
installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'helloApp' successfully created.

Catatan: Saat pertamakali menjalankan terdapat error: Fail npm install node-gyp. Yang saya lakukan ialah menginstal dengan perintah $ sudo npm install -g node-gyp kemudian saya jalankan perintah $ npm cache clear. Namun, saat kembali dicoba error masih sama, kebetulan komputer lagi hang saya restart dan coba instal angularjs kembali dan lancar tidak ada error seperti diatas.

Uji Coba

Untuk uji coba, pertama masuk kedalam direktori helloApp

$ cd helloApp

dan jalankan server dengan mengetikan ng serve --open seperti berikut:

$ ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 27% building modules 145/190 modules 45 active ...s/modules/core.get-iterator-method.jswebpack: wait until bundle finished: /
Hash: d04540e15aa1b0d130fa                                                              
Time: 18506ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Sehingga web browser akan terbuka dengan mengarahkan pada URL http://localhost:4200/.

Referensi

  1. https://angular.io/guide/quickstart (akses 29/06/2017)
  2. https://askubuntu.com/questions/786272/why-does-installing-node-6-x-on-ubuntu-16-04-actually-install-node-4-2-6 (akses 29/06/2017)
  3. https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions (akses 29/06/2017)
  4. https://github.com/expressjs/express/issues/2930 (akses 29/06/2017)