Để bắt đầu với Angular phiên bản 12, bước đầu tiên bạn cần cài đặt đúng phiên bản CLI (Command Line Interface) tương ứng. Dưới đây là quy trình chi tiết từ lúc cài đặt đến khi xử lý các lỗi phát sinh phổ biến.

1. Cài đặt Angular CLI phiên bản 12

Sử dụng npm để cài đặt phiên bản cụ thể của Angular CLI nhằm đảm bảo tính tương thích:

npm install -g @angular/cli@12.2.17

Sau khi cài đặt xong, bạn có thể kiểm tra lại phiên bản bằng lệnh:

ng version

2. Khởi tạo dự án mới

Để tạo một project mới, hãy chạy lệnh sau trong terminal:

ng new angular-v12-app

Trong quá trình khởi tạo, CLI sẽ yêu cầu bạn xác nhận các tùy chọn:

• Would you like to add Angular routing? Chọn y để tích hợp sẵn module điều hướng.
• Which stylesheet format would you like to use? Chọn SCSS để sử dụng các tính năng mở rộng của CSS.

Nếu quá trình npm install diễn ra quá chậm, bạn có thể nhấn Ctrl + C để dừng lại, sau đó di chuyển vào thư mục dự án và sử dụng các công cụ thay thế như cnpm hoặc yarn để cài đặt package.

3. Xử lý các lỗi thực thi lệnh trên Windows

Nếu bạn gặp lỗi không thể chạy file ng.ps1 do chính sách bảo mật của PowerShell (Restricted), hãy thực hiện các bước sau:

1. Mở PowerShell với quyền Administrator.
2. Chạy lệnh sau để thay đổi chính sách thực thi:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Chọn Y khi được hỏi để xác nhận thay đổi.

4. Khắc phục lỗi tương thích Node.js (OpenSSL)

Khi sử dụng Node.js phiên bản 17 trở lên với Angular 12, bạn thường gặp lỗi error:0308010C:digital envelope routines::unsupported do cơ chế OpenSSL mới.

Cách xử lý:

• Cách 1: Hạ cấp phiên bản Node.js xuống bản LTS ổn định cho Angular 12 (khuyên dùng Node.js 14.x hoặc 16.x).
• Cách 2: Thiết lập biến môi trường để sử dụng nhà cung cấp OpenSSL cũ:

  $env:NODE_OPTIONS = "--openssl-legacy-provider"

5. Lỗi Webpack AngularWebpackPlugin

Trong một số trường hợp, hệ thống báo lỗi AngularWebpackPlugin is not a constructor. Điều này thường do thiếu hoặc sai lệch phiên bản công cụ build. Bạn có thể thử cài đặt lại plugin sau:

npm install @ngtools/webpack --save-dev

6. Cấu hình npm và Module

Đảm bảo npm của bạn ở phiên bản ổn định. Nếu cần làm sạch cache để tránh lỗi cài đặt:

npm cache clean --force
npm install -g npm@latest

Từ các phiên bản Angular mới (như v17+), CLI mặc định sử dụng Standalone Components. Nếu bạn muốn quay lại cấu trúc truyền thống có file app.module.ts khi tạo dự án mới, hãy thêm flag:

ng new my-old-style-app --no-standalone

7. Tạo các thành phần (Component) và Dịch vụ (Service)

Để duy trì cấu trúc thư mục ngăn nắp, bạn nên tạo các thành phần bên trong các thư mục con tương ứng:

Tạo Component:

ng g component components/user-profile
# Hoặc viết tắt
ng g c components/header

Tạo Service:

ng g service services/api-handler

Lưu ý: Luôn chạy các lệnh này tại thư mục gốc của dự án để CLI có thể tự động cập nhật khai báo vào NgModule tương ứng.