Cài đặt môi trường

Mục lụcCopy Anchor Link

• Yêu cầu tối thiểu
  • Hệ điều hành và trình duyệt
  • Node.js và package manager
• Cài Node.js
  • Chọn phiên bản Node.js
  • Kiểm tra sau khi cài
• Chọn package manager
• Dùng Angular CLI
  • Cách khuyến nghị: chạy CLI qua npx
  • Cài CLI toàn cục khi cần
• Chuẩn bị trình soạn thảo và công cụ trình duyệt
• Kiểm tra môi trường trước khi tạo dự án
• Lỗi thiết lập thường gặp
• Bước tiếp theo

Yêu cầu tối thiểuCopy Anchor Link

Một dự án Angular hiện đại cần Node.js để chạy công cụ phát triển và package manager để tải các thư viện. Mã Angular sau khi build sẽ chạy trong trình duyệt; Node.js không phải là runtime của ứng dụng phía người dùng.

Hệ điều hành và trình duyệtCopy Anchor Link

Bạn có thể phát triển Angular trên Windows, macOS hoặc Linux. Hãy dùng một phiên bản trình duyệt còn được cập nhật, chẳng hạn Chrome, Edge, Firefox hoặc Safari, để chạy và kiểm tra ứng dụng.

Trình duyệt dùng để phát triển không quyết định hoàn toàn trình duyệt mà sản phẩm hỗ trợ. Danh sách trình duyệt đích của mỗi workspace được cấu hình riêng. Khi bắt đầu học, một trình duyệt hiện đại là đủ.

Node.js và package managerCopy Anchor Link

Bản cài Node.js chính thức đi kèm npm. npm vừa là package manager vừa là công cụ chạy script, ví dụ npm install và npm start. Vì vậy, cài Node.js LTS là cách ngắn nhất để có môi trường hoạt động.

Cài Node.jsCopy Anchor Link

Chọn phiên bản Node.jsCopy Anchor Link

Tải bản LTS từ nodejs.org. LTS là nhánh được hỗ trợ dài hạn, phù hợp cho việc học và hầu hết dự án. Không nên chọn phiên bản Current chỉ vì số phiên bản lớn hơn.

Mỗi major version Angular chỉ hỗ trợ một số khoảng phiên bản Node.js nhất định. Trước khi nâng cấp Angular hoặc Node.js cho một dự án có sẵn, đối chiếu với bảng tương thích phiên bản Angular. Điều này quan trọng hơn việc dùng bản Node.js mới nhất.

Nếu bạn thường xuyên làm nhiều dự án cần các phiên bản Node.js khác nhau, có thể dùng một trình quản lý phiên bản như nvm, fnm hoặc công cụ tương đương của hệ điều hành. Với người mới, trình cài đặt LTS chính thức là lựa chọn đơn giản nhất.

Kiểm tra sau khi càiCopy Anchor Link

Đóng rồi mở lại terminal để biến môi trường PATH được nạp lại, sau đó chạy:

node --version
npm --version

Cả hai lệnh phải in ra một số phiên bản. Ví dụ, node --version có thể trả về v22.x.x; con số thực tế tùy bản LTS đang cài. Nếu terminal báo không tìm thấy lệnh, xem phần Lỗi thiết lập thường gặp.

Chọn package managerCopy Anchor Link

Bắt đầu với npm là đủ vì nó đã có sẵn cùng Node.js. Trong thư mục dự án, các lệnh thường dùng là:

npm install
npm run start
npm run build

Bạn có thể chọn pnpm hoặc Yarn nếu nhóm đang dùng chúng. Hãy làm theo lockfile và hướng dẫn của repository thay vì cài cùng một dependency bằng nhiều công cụ khác nhau.

Dùng Angular CLICopy Anchor Link

Angular CLI là bộ công cụ dòng lệnh để tạo workspace, chạy development server, sinh mã và build ứng dụng. Bạn không bắt buộc phải cài CLI toàn cục.

Cách khuyến nghị: chạy CLI qua npxCopy Anchor Link

Khi tạo một ứng dụng mới, chạy đúng package CLI bằng npx:

npx @angular/cli@latest new ten-ung-dung

Lệnh này tải và chạy Angular CLI cho lần tạo dự án. Sau khi workspace được tạo, @angular/cli trở thành dependency phát triển của chính workspace. Từ trong thư mục đó, ưu tiên các script trong package.json, chẳng hạn:

npm start

Hoặc gọi CLI cục bộ của workspace:

npx ng version

Cách này giúp phiên bản CLI bám theo phiên bản Angular của dự án, thay vì phụ thuộc vào một CLI toàn cục có thể đã cũ.

Cài CLI toàn cục khi cầnCopy Anchor Link

Nếu bạn muốn gọi ng trực tiếp từ mọi thư mục, cài CLI toàn cục:

npm install -g @angular/cli
ng version

CLI toàn cục tiện cho việc khám phá lệnh. Tuy vậy, khi làm trong một workspace, CLI cục bộ vẫn là lựa chọn an toàn hơn. Nếu ng version hiển thị khác biệt giữa global và local, hãy ưu tiên local khi chạy lệnh cho dự án đó.

Chuẩn bị trình soạn thảo và công cụ trình duyệtCopy Anchor Link

Visual Studio Code là lựa chọn phổ biến vì có TypeScript tích hợp tốt. Cài extension Angular Language Service để nhận gợi ý, kiểm tra kiểu và điều hướng trong template Angular.

Mở DevTools của Chrome hoặc Edge để xem lỗi console, Network và hiệu năng trang. Sau này, Angular DevTools giúp quan sát component tree và profiler của ứng dụng Angular trong trình duyệt tương thích.

Kiểm tra môi trường trước khi tạo dự ánCopy Anchor Link

Chạy các lệnh sau trong terminal. Lệnh CLI cuối cùng không bắt buộc nếu bạn dự định dùng npx để tạo ứng dụng ở bước tiếp theo.

node --version
npm --version
git --version
ng version

Bạn đã sẵn sàng khi:

• node và npm in ra phiên bản hợp lệ.
• Terminal có thể tìm thấy git nếu bạn dùng Git.
• ng version chạy được nếu đã cài Angular CLI toàn cục; nếu chưa cài, đây không phải lỗi chặn.
• Trình soạn thảo mở được terminal tích hợp và trình duyệt mở được DevTools.

Lỗi thiết lập thường gặpCopy Anchor Link

node, npm hoặc ng không được nhận diệnCopy Anchor Link

Đóng mọi cửa sổ terminal rồi mở lại. Trên Windows, nếu vẫn lỗi, kiểm tra biến môi trường PATH có thư mục cài Node.js hay không. Với ng, hãy cài lại CLI toàn cục hoặc bỏ qua lệnh ng và dùng npx @angular/cli@latest khi tạo dự án.

Lỗi quyền khi cài package toàn cụcCopy Anchor Link

Không nên mặc định chạy terminal với quyền quản trị chỉ để cài package. Hãy kiểm tra cấu hình thư mục global của npm hoặc dùng npx để tránh nhu cầu cài Angular CLI toàn cục. Nếu công ty quản lý máy, chính sách bảo mật có thể giới hạn thao tác này; hãy dùng cấu hình được đội ngũ hỗ trợ.

Phiên bản Node.js không tương thíchCopy Anchor Link

Đừng đoán nguyên nhân dựa trên một thông báo lỗi duy nhất. Kiểm tra phiên bản hiện tại bằng node --version, xác định major version Angular của workspace, rồi so sánh với bảng tương thích chính thức. Sau đó chuyển sang phiên bản Node.js được hỗ trợ và chạy lại lệnh cài dependency.

Bước tiếp theoCopy Anchor Link

Môi trường đã sẵn sàng; tiếp theo hãy tìm hiểu các lệnh quan trọng của CLI trước khi tạo ứng dụng đầu tiên.