Thành Thạo Angular CLI: Hướng Dẫn Tối Ưu Quy Trình Phát Triển

Nếu bạn đã từng làm việc với Angular, chắc hẳn bạn đã nghe đến Angular CLI. Đây là công cụ dòng lệnh giúp khởi tạo dự án của bạn với lệnh đơn giản ng new my-app. Nhưng bạn có biết rằng bạn có thể đang chỉ sử dụng 10% sức mạnh của nó? Đối với nhiều lập trình viên, CLI chỉ là một công cụ khởi động dự án. Nhưng đối với những người chuyên nghiệp, nó là một bộ công cụ phát triển toàn diện có khả năng tăng cường quy trình làm việc, thực thi các phương pháp tốt nhất và giảm thiểu lỗi do con người.

Trong hướng dẫn này, chúng ta sẽ đi sâu vào các tính năng nâng cao, các lệnh và cấu hình mà biến Angular CLI từ một tiện ích hữu ích thành một phần không thể thiếu trong bộ công cụ chuyên nghiệp của bạn. Dù bạn là người mới bắt đầu hay là lập trình viên có kinh nghiệm, bài viết này sẽ hữu ích cho bạn.

Angular CLI là gì?

Về cơ bản, Angular CLI (Command Line Interface) là một công cụ mạnh mẽ để khởi tạo, phát triển, cấu trúc, duy trì, kiểm tra và xây dựng các ứng dụng Angular. Nó được xây dựng trên Node.js và giúp trừu tượng hóa cấu hình phức tạp của các công cụ như Webpack, TypeScript, Karma và Protractor.

Hãy coi nó như là một trợ lý chính của dự án của bạn. Nó xử lý những nhiệm vụ nhàm chán, lặp đi lặp lại và dễ mắc lỗi để bạn có thể tập trung vào những gì bạn làm tốt nhất: viết logic ứng dụng.

Lợi ích chính của Angular CLI

Tóm tắt lợi ích:

Tính nhất quán: Mỗi dự án được tạo ra với CLI đều tuân theo cùng một cấu trúc và các phương pháp tốt nhất.
Hiệu quả: Tạo các thành phần, dịch vụ, mô-đun và nhiều hơn nữa chỉ với một lệnh.
Năng suất: Máy chủ phát triển tích hợp, tự động tải lại và tối ưu hóa xây dựng giúp tiết kiệm rất nhiều thời gian.
Độ tin cậy: Các công cụ kiểm tra và linting tích hợp giúp duy trì chất lượng mã.

Nâng Cao Kỹ Năng: Các Lệnh và Cờ Bạn Nên Sử Dụng

Hãy cùng nhau tìm hiểu thêm. Bạn biết ng serve và ng build. Dưới đây là cách mà các chuyên gia sử dụng chúng.

1. Phục vụ thông minh cho quy trình làm việc thực tế

ng serve là người bạn tốt nhất của bạn trong quá trình phát triển, nhưng với các cờ đúng, nó trở thành một siêu anh hùng.

--port và --host: Bạn cần chạy trên một cổng cụ thể hoặc cho phép truy cập từ các thiết bị khác trên mạng của bạn (như thử nghiệm trên di động)?
bash Copy
```
ng serve --port 4201 --host 0.0.0.0  
```
--proxy-config: Đây là một thay đổi lớn. Gọi đến một API backend trong quá trình phát triển thường dẫn đến lỗi CORS. Thay vì vật lộn với CORS trên backend của bạn, hãy sử dụng một proxy. Tạo một tệp proxy.conf.json:
json Copy
```
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}
```
Sau đó, phục vụ ứng dụng của bạn với:
bash Copy
```
ng serve --proxy-config proxy.conf.json  
```

Bây giờ, tất cả các yêu cầu đến /api/users trong ứng dụng Angular của bạn sẽ được chuyển tiếp đến http://localhost:3000/api/users, giúp tránh các vấn đề CORS một cách liền mạch.

2. Xây dựng cho sản xuất như một chuyên gia

ng build cơ bản là dành cho phát triển. Ma thuật thực sự xuất hiện với các bản dựng sản xuất.

--configuration=production (hoặc --prod trong các phiên bản cũ hơn): Đây là cái chính. Nó kích hoạt:
- Biên dịch Ahead-of-Time (AOT): Các mẫu được biên dịch trong quá trình xây dựng, dẫn đến thời gian hiển thị nhanh hơn trong trình duyệt và các gói nhỏ hơn.
- Ghép nhóm và Thu nhỏ: Mã của bạn được kết hợp và thu nhỏ lại.
- Làm xấu hóa: Tên biến được thay đổi thành những cái ngắn gọn và không có nghĩa.
- Loại bỏ mã chết: Mã không sử dụng sẽ bị loại bỏ (Tree-shaking).
bash Copy
```
ng build --configuration=production  
```
--source-map=false: Đối với một bản dựng sản xuất cuối cùng, bạn có thể không muốn gửi các bản đồ nguồn, làm cho mã của bạn khó bị đảo ngược hơn.
bash Copy
```
ng build --configuration=production --source-map=false  
```
--vendor-chunk và --common-chunk: Kiểm soát cách mã của bạn được phân tách. Đối với các ứng dụng lớn, việc tách các thư viện bên thứ ba (như Angular) khỏi mã ứng dụng của bạn có thể cải thiện khả năng lưu trữ.

3. Tạo mã nâng cao: Cấu trúc với mục đích

ng generate component my-component là cơ bản. Nhưng hãy trở nên có chủ đích hơn.

Chỉ định Mô-đun (--module): Khi bạn tạo một thành phần, CLI cần thêm nó vào mảng khai báo của một mô-đun. Đừng làm điều này bằng tay! Chỉ định mô-đun ngay trong lệnh.
bash Copy
```
ng generate component features/user-profile --module=app.module.ts  
```
Sức mạnh của --flat và --skip-tests: Tổ chức dự án của bạn tốt hơn.
- --flat: Tạo tệp trong thư mục đã chỉ định mà không tạo thư mục mới cho nó. Thích hợp cho các dịch vụ hoặc mô hình.
bash Copy
```
ng generate service core/data --flat  
```
- --skip-tests: Nếu dự án của bạn không sử dụng cấu hình kiểm tra mặc định của Angular (ví dụ: bạn sử dụng Jest), hãy bỏ qua việc tạo các tệp .spec.ts.
bash Copy
```
ng generate module shared/widget --skip-tests  
```
Tạo Schematic Có Thể Tái Sử Dụng: Đây thực sự là cấp độ chuyên nghiệp. Bạn có thể tạo các bản phác thảo tùy chỉnh cho các thành phần phù hợp với các tiêu chuẩn cụ thể của nhóm bạn. Điều này đảm bảo sự nhất quán trong một nhóm lớn hoặc tổ chức.

Trường hợp sử dụng thực tế: Xây dựng mô-đun tính năng

Hãy đi qua một kịch bản phổ biến. Bạn cần thêm một tính năng "Dashboard" vào ứng dụng của mình. Một chuyên gia sẽ sử dụng CLI để cấu trúc toàn bộ một cách hiệu quả và chính xác.

Tạo Mô-đun: Chúng ta muốn một mô-đun dành riêng cho bảng điều khiển để tải lười sau này.
bash Copy
```
ng generate module dashboard --route dashboard --module app.module.ts  
```

Lệnh đơn này tạo ra DashboardModule, một dashboard-routing.module.ts, và thiết lập tuyến đường tải lười trong app-routing.module.ts. Thật kỳ diệu!

Tạo Các Thành Phần trong Mô-đun:

bash Copy

ng generate component dashboard/components/stats-card --module=dashboard.module.ts  
ng generate component dashboard/pages/dashboard-home --module=dashboard.module.ts

Bằng cách chỉ định --module=dashboard.module.ts, các thành phần của chúng tôi sẽ tự động được khai báo trong mô-đun đúng.

Cách tiếp cận có cấu trúc này, được CLI thực thi, giữ cho mã của bạn sạch sẽ, mô-đun và có thể mở rộng.

Sức mạnh cấu hình: Tệp angular.json

Tệp angular.json là bộ não của dự án Angular CLI của bạn. Đây là nơi bạn định nghĩa các thiết lập toàn cục cho dự án. Các chuyên gia biết cách điều chỉnh tệp này.

Nhiều cấu hình xây dựng:

Bạn có thể định nghĩa nhiều hơn chỉ sản xuất và phát triển. Thế còn một môi trường staging thì sao?

json Copy

"configurations": {
  "production": { ... },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false
  }
}

Xây dựng với: ng build --configuration=staging

Cấu hình tài sản:

Định nghĩa các kiểu toàn cầu (như cho một framework CSS) hoặc sao chép các tài sản tĩnh (như hình ảnh và phông chữ) vào đầu ra của bản dựng.

Ngân sách:

Một trong những tính năng mạnh mẽ nhất, ít được sử dụng. Đặt ngân sách kích thước để nhận cảnh báo hoặc lỗi nếu các gói của bạn phát triển quá lớn, ngăn chặn sự suy giảm hiệu suất.

json Copy

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  }
]

Các phương pháp tốt nhất khi sử dụng CLI

Giữ cho nó được cập nhật: Thường xuyên cập nhật Angular CLI và dự án của bạn lên phiên bản ổn định mới nhất để hưởng lợi từ những cải tiến hiệu suất và tính năng mới. Sử dụng ng update để quản lý quy trình này một cách trơn tru.
Sử dụng cấu trúc nhất quán: Để CLI hướng dẫn cấu trúc thư mục của dự án của bạn. Điều này giúp dễ dàng cho các lập trình viên mới tham gia.
Coi trọng Linting: Sử dụng ng lint thường xuyên. Nó phát hiện các lỗi phổ biến và thực thi kiểu mã. Hãy xem xét việc tích hợp nó vào các hooks trước khi commit.
Tự động hóa kiểm tra: Đừng chỉ viết các bài kiểm tra; hãy chạy chúng với CLI. ng test chạy các bài kiểm tra đơn vị của bạn ở chế độ theo dõi, và ng e2e chạy các bài kiểm tra end-to-end.
Hiểu quy trình xây dựng: Đừng coi quy trình xây dựng là một cái hộp đen. Hiểu những gì AOT, tree-shaking và minification làm. Kiến thức này rất quan trọng cho việc gỡ lỗi và tối ưu hóa.

Câu hỏi thường gặp (FAQs)

Hỏi: Tôi có thể sử dụng Angular CLI với các thư viện quản lý trạng thái khác như NgRx không?
Đáp: Chắc chắn rồi! CLI không phụ thuộc vào lựa chọn quản lý trạng thái của bạn. Bạn có thể sử dụng các schematics của cộng đồng (như @ngrx/schematics) để tạo ra các actions, reducers và effects bằng cách sử dụng giao diện dòng lệnh tương tự, điều này giúp tăng năng suất đáng kể.

Hỏi: Làm thế nào để tôi mở rộng Angular CLI với các builders tùy chỉnh?
Đáp: Đây là một tính năng nâng cao. Bạn có thể tạo các builders tùy chỉnh để thực hiện các nhiệm vụ vượt ra ngoài những gì mặc định của CLI, như triển khai đến một nhà cung cấp đám mây cụ thể hoặc chạy một kịch bản tối ưu hóa tùy chỉnh. Điều này yêu cầu tạo một thư viện Angular tùy chỉnh.

Hỏi: Bản dựng của tôi chậm. Có mẹo nào không?
Đáp: Có!

Đảm bảo bạn đang sử dụng cấu hình sản xuất (--configuration=production).
Kiểm tra xem bạn có thể tải lười thêm nhiều mô-đun tính năng hơn không.
Kiểm tra kích thước gói của bạn với ng build --stats-json và phân tích đầu ra với một công cụ như webpack-bundle-analyzer.
Cân nhắc việc bật bộ nhớ đệm xây dựng vĩnh viễn trong tệp angular.json của bạn.

Hỏi: Angular CLI chỉ dành cho các ứng dụng một trang (SPA) phải không?
Đáp: Chủ yếu là đúng. Tuy nhiên, với các framework như Angular Universal cho việc render phía máy chủ (SSR), CLI có thể được sử dụng để xây dựng và phục vụ các ứng dụng đa năng. Nhóm Angular CLI đã tích hợp thêm hỗ trợ SSR trực tiếp vào công cụ.

Kết luận: Từ Người Dùng đến Người Sử Dụng Quyền Lực

Angular CLI không chỉ là một công cụ khởi tạo dự án. Nó là một động cơ quy trình toàn diện được thiết kế để giúp bạn trở thành một lập trình viên Angular hiệu quả và chuyên nghiệp hơn. Bằng cách thành thạo các lệnh nâng cao, hiểu cấu hình của nó và áp dụng các phương pháp tốt nhất, bạn có thể loại bỏ các nhiệm vụ thủ công, giảm lỗi và đảm bảo rằng các dự án của bạn được xây dựng trên một nền tảng vững chắc, có thể mở rộng.

Hành trình từ người mới đến chuyên gia được lấp đầy bởi những tối ưu hóa nhỏ mà cộng lại tạo nên sự khác biệt lớn. Hãy bắt đầu tích hợp những mẹo này vào quy trình làm việc hàng ngày của bạn ngay hôm nay.

Để tìm hiểu các khóa học phát triển phần mềm chuyên nghiệp như Lập Trình Python, Phát Triển Full Stack và MERN Stack, bao gồm các công cụ và framework mạnh mẽ như Angular, hãy truy cập và đăng ký ngay hôm nay tại codercrafter.in. Chương trình học dựa trên dự án của chúng tôi được thiết kế để giúp bạn thành thạo các công cụ nghề nghiệp và xây dựng một hồ sơ nổi bật.

Thành Thạo Angular CLI: Hướng Dẫn Tối Ưu Quy Trình Phát Triển