Angular CLI - การตั้งค่าสภาพแวดล้อม

ในการทำงานกับ Angular CLI เราจำเป็นต้องติดตั้ง Node ในระบบของเรา

ดาวน์โหลดไฟล์ Node.js

ดาวน์โหลดรุ่นล่าสุดของ Node.js เก็บไฟล์ติดตั้งจากNode.js ดาวน์โหลด ในขณะที่เขียนบทช่วยสอนนี้เวอร์ชันที่พร้อมใช้งานในระบบปฏิบัติการต่างๆมีดังต่อไปนี้

ระบบปฏิบัติการ	ชื่อที่เก็บถาวร
Windows	โหนด v6.3.1-x64.msi
ลินุกซ์	โหนด v6.3.1-linux-x86.tar.gz
Mac	โหนด v6.3.1-darwin-x86.tar.gz
SunOS	โหนด v6.3.1-sunos-x86.tar.gz

การติดตั้งบน UNIX / Linux / Mac OS X และ SunOS

ขึ้นอยู่กับสถาปัตยกรรมระบบปฏิบัติการของคุณดาวน์โหลดและแตกไฟล์ archive node-v6.3.1-osname.tar.gz ไปยัง / tmp จากนั้นย้ายไฟล์ที่แยกแล้วไปยังไดเร็กทอรี / usr / local / nodejs ตัวอย่างเช่น:

$ cd /tmp
$ wget http://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.gz
$ tar xvfz node-v6.3.1-linux-x64.tar.gz
$ mkdir -p /usr/local/nodejs
$ mv node-v6.3.1-linux-x64/* /usr/local/nodejs

เพิ่ม / usr / local / nodejs / bin ให้กับตัวแปรสภาพแวดล้อม PATH

ระบบปฏิบัติการ	เอาต์พุต
ลินุกซ์	ส่งออก PATH = $ PATH: / usr / local / nodejs / bin
Mac	ส่งออก PATH = $ PATH: / usr / local / nodejs / bin
FreeBSD	ส่งออก PATH = $ PATH: / usr / local / nodejs / bin

การติดตั้งบน Windows

ใช้ไฟล์ MSI และทำตามคำแนะนำเพื่อติดตั้ง Node.js โดยค่าเริ่มต้นโปรแกรมติดตั้งจะใช้การแจกจ่าย Node.js ใน C: \ Program Files \ nodejs โปรแกรมติดตั้งควรตั้งค่าไดเร็กทอรี C: \ Program Files \ nodejs \ bin ในตัวแปรสภาพแวดล้อม PATH ของหน้าต่าง รีสตาร์ทพร้อมต์คำสั่งที่เปิดอยู่เพื่อให้การเปลี่ยนแปลงมีผล

ตรวจสอบการติดตั้ง: การเรียกใช้ไฟล์

สร้างไฟล์ js ชื่อ main.js บนเครื่องของคุณ (Windows หรือ Linux) โดยมีรหัสต่อไปนี้

/* Hello, World! program in node.js */
console.log("Hello, World!")

ตอนนี้เรียกใช้ไฟล์ main.js โดยใช้ Node.js interpreter เพื่อดูผลลัพธ์ -

$ node main.js

หากทุกอย่างเรียบร้อยดีกับการติดตั้งของคุณสิ่งนี้ควรให้ผลลัพธ์ดังต่อไปนี้ -

Hello, World!

ตอนนี้ติดตั้ง Node แล้วให้รันคำสั่งต่อไปนี้เพื่อติดตั้ง Angular CLI

ให้เราใช้คำสั่งต่อไปนี้เหมือนกัน -

npm install -g @angular/cli

ตรวจสอบการติดตั้ง

ตอนนี้เรียกใช้คำสั่งต่อไปนี้เพื่อดูผลลัพธ์ -

$ ng --version

หากทุกอย่างเรียบร้อยดีกับการติดตั้งของคุณสิ่งนี้ควรให้ผลลัพธ์ดังต่อไปนี้ -

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.0
Node: 12.16.1
OS: win32 x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.0
@angular-devkit/core         9.1.0
@angular-devkit/schematics   9.1.0
@schematics/angular          9.1.0
@schematics/update           0.901.0
rxjs                         6.5.4

บน Windows ในกรณีที่ไม่รู้จัก ng เป็นคำสั่งภายในหรือภายนอกให้อัพเดตตัวแปรเส้นทางระบบเพื่อรวมพา ธ ต่อไปนี้

C:\Users\<User Directory>\AppData\Roaming\npm