Cách cài đặt Angular trên Ubuntu 20.04 LTS

[theanh]

Angular là một nền tảng ứng dụng web nguồn mở để xây dựng các ứng dụng web di động và máy tính để bàn. Nó được viết bằng TypeScript/JavaScript và được Google tạo ra vào năm 2009. Nó được thiết kế đặc biệt để xây dựng các ứng dụng quy mô nhỏ đến lớn từ đầu. Nó đi kèm với một tiện ích Angular CLI giúp bạn tạo, quản lý, xây dựng và kiểm tra các ứng dụng Angular.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách cài đặt Angular trên Ubuntu 20.04.

Điều kiện tiên quyết​

• Một máy chủ chạy Ubuntu 20.04.
• Một mật khẩu gốc được cấu hình trên máy chủ.

Cài đặt Node.js​

Trước khi bắt đầu, bạn sẽ cần cài đặt Node.js và npm trong hệ thống của mình. Theo mặc định, phiên bản mới nhất của Node.js không có trong kho lưu trữ mặc định của Ubuntu 20.04. Vì vậy, bạn sẽ cần thêm kho lưu trữ Node.js vào hệ thống của mình.

Đầu tiên, hãy thêm kho lưu trữ Node.js bằng lệnh sau:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Sau khi thêm, hãy cài đặt Node.js bằng lệnh sau:

apt-get install nodejs -y

Sau khi cài đặt, hãy xác minh phiên bản Node.js đã cài đặt bằng lệnh sau:

node --version

Bạn sẽ thấy kết quả sau:

v14.7.0

Tiếp theo, hãy cập nhật phiên bản npm lên phiên bản mới nhất bằng cách chạy lệnh sau:

npm install npm@latest -g

Tiếp theo, hãy xác minh phiên bản npm bằng lệnh sau:

npm --version

Bạn sẽ nhận được kết quả sau:

6.14.7

Cài đặt Angular​

Bạn có thể cài đặt Angular bằng npm như hiển thị bên dưới:

npm install -g @angular/cli

Sau khi cài đặt, hãy xác minh phiên bản Angular đã cài đặt bằng lệnh sau:

ng version

Bạn sẽ thấy đầu ra sau:

_ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / ? \ | '_ \ / _` | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/Angular CLI: 10.0.5Node: 14.7.0OS: linux x64Angular:...Ivy Workspace:Phiên bản gói------------------------------------------------------@angular-devkit/architect 0.1000.5@angular-devkit/core 10.0.5@angular-devkit/schematics 10.0.5@schematics/angular 10.0.5@schematics/update 0.1000.5rxjs 6.5.5

Tạo dự án Angular​

Lúc này, Angular đã được cài đặt trong hệ thống của bạn. Đã đến lúc tạo một dự án mới với Angular.

Đầu tiên, hãy thay đổi thư mục thành /opt và tạo một dự án mới có tên là myproject bằng lệnh sau:

cd /opt
ng new myproject

Tiếp theo, hãy thay đổi thư mục thành myproject và phục vụ dự án bằng lệnh sau:

cd myproject
ng serve --host your-server-ip --port 8088

Bạn sẽ thấy kết quả sau:

CẢNH BÁO: Đây là máy chủ đơn giản để sử dụng trong quá trình thử nghiệm hoặc gỡ lỗi các ứng dụng Angulartại địa phương. Máy chủ này chưa được xem xét về các vấn đề bảo mật.Việc liên kết máy chủ này với một kết nối mở có thể dẫn đến việc xâm phạm ứng dụng hoặcmáy tính của bạn. Sử dụng máy chủ khác với máy chủ được chuyển đến cờ "--host" có thể dẫn đếncác vấn đề kết nối websocket. Bạn có thể cần sử dụng "--disableHostCheck" nếu đólà trường hợp.Biên dịch @angular/animations: es2015 thành esm2015Biên dịch @angular/core: es2015 thành esm2015Biên dịch @angular/animations/browser: es2015 thành esm2015Biên dịch @angular/animations/browser/testing: es2015 thành esm2015Biên dịch @angular/common: es2015 thành esm2015Biên dịch @angular/common/http: es2015 thành esm2015Biên dịch @angular/common/http/testing: es2015 thành esm2015Biên dịch @angular/forms: es2015 thành esm2015Biên dịch @angular/platform-browser: es2015 thành esm2015Biên dịch @angular/platform-browser/animations: es2015 là esm2015Biên dịch @angular/core/testing: es2015 là esm2015Biên dịch @angular/platform-browser-dynamic: es2015 là esm2015Biên dịch @angular/platform-browser/testing: es2015 là esm2015Biên dịch @angular/compiler/testing: es2015 là esm2015Biên dịch @angular/platform-browser-dynamic/testing: es2015 là esm2015Biên dịch @angular/common/testing: es2015 là esm2015Biên dịch @angular/router: es2015 là esm2015Biên dịch @angular/router/testing: es2015 là esm2015chunk {main} main.js, main.js.map (main) 60,6 kB [initial] [rendered]chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]chunk {runtime} runtime.js, runtime.js.map (runtime) 6,15 kB [entry] [rendered]chunk {styles} styles.js, styles.js.map (styles) 12,3 kB [initial] [rendered]chunk {vendor} vendor.js, vendor.js.map (vendor) 2,65 MB [initial] [rendered]Ngày: 2020-08-09T14:10:36.644Z - Băm: a053188b5496361814a2 - Thời gian: 14873ms** Angular Live Development Server đang lắng nghe trên 69.87.218.220:8088, hãy mở trình duyệt của bạn trên http://69.87.218.220:8088/ **: Đã biên dịch thành công.

Truy cập Giao diện web Angular​

Tại thời điểm này, dự án Angular đã được triển khai và đang lắng nghe trên cổng 8088. Bạn có thể truy cập dự án này bằng URL http://your-server-ip:8088. Bạn sẽ thấy màn hình sau:

Kết luận​

Xin chúc mừng! Bạn đã cài đặt thành công Angular trên Ubuntu 20.04. Bây giờ bạn có thể bắt đầu triển khai dự án đầu tiên của mình bằng Angular. Một trong những tính năng tuyệt vời của Angular là webpack hot reloading triển khai thay đổi trực tiếp và tiết kiệm rất nhiều thời gian của bạn.