如果您正在使用Angular，就知道Angular CLI有多有用。它簡化了創建和管理Angular項目的過程，憑借其直觀的命令行界面，它可以輕松處理復雜的任務，如生成組件、服務、管道、指令等。

但是您知道如何有效地使用Angular CLI嗎？在本文中，我們將分享10個超級棒的實戰應用技巧，來幫助您掌握Angular CLI。它們涵蓋了配置、優化、定制和調試等主題，無論您是初學者還是技術大牛，都會在這個列表中找到一些有用的東西。

P.S：Kendo UI是帶有jQuery、Angular、React和Vue庫的JavaScript UI組件的最終集合，無論選擇哪種JavaScript框架，都可以快速構建高性能響應式Web應用程序。通過可自定義的UI組件，Kendo UI可以創建數據豐富的桌面、平板和移動Web應用程序。通過響應式的布局、強大的數據綁定、跨瀏覽器兼容性和即時使用的主題，Kendo UI將開發時間加快了50%。

Kendo UI新版下載

1. 從基本要素開始

當使用ng new命令啟動一個新的Angular項目時，可以使用--minimal flag來創建一個最小的啟動項目。如果您希望從頭開始，只包含項目所需的功能和依賴項，那么這將非常有用。

要使用這個標志，只需運行命令ng new my-project --minimal，其中my-project是新項目的名稱。這將創建一個新的Angular項目，只包含必要的文件和依賴項，讓您可以從頭開始構建項目。

2. 保持代碼的整潔和一致

ng lint它根據tslint.json文件中指定的規則檢查代碼中的錯誤和樣式問題，它可以幫助你保持代碼的整潔，并與Angular樣式指南保持一致。

例如，如果您有一個名為app.component.ts的文件，它的代碼如下：

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';
}

你可以在終端上運行ng lint，得到如下輸出：

這意味著您需要修改組件的選擇器和模板，來遵循Angular的樣式指南，也可以使用ng lint --fix來自動修復一些錯誤。

3. 用Sass增強樣式表

Sass是一個CSS預處理器，它允許您編寫更簡潔和可維護的樣式表，它為純CSS添加了變量、混合、嵌套、繼承等特性。

要在Angular CLI中使用Sass，您需要：

• 使用--style=scss flag創建一個新項目，它告訴CLI生成.scss文件替代.css文件，例如：ng new my-sassy-app --style=scss。
• 把您的樣式寫在src文件夾中的.scss文件中，可以使用任何喜歡的Sass特性，比如變量、mixins、嵌套等。當你運行ng serve或ng build時，CLI會自動將Sass文件編譯成CSS。
• 使用組件裝飾器中的styleUrls屬性將您的樣式導入到組件中，例如：@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })，還可以使用styles屬性以Sass語法編寫內聯樣式。

4. 為生產優化代碼

ng build --prod是Angular CLI中用來為生產環境構建Angular應用的命令， --prod flag告訴CLI使用生產環境配置，并對構建過程應用各種優化。

在為生產環境構建時，重要的是要確保應用程序針對性能和大小進行了優化。ng build --prod命令應用一些優化，比如最小化、tree shaking和AOT (Ahead-of-Time)編譯，來減小應用程序的大小并提高其性能。

在將Angular應用部署到生產環境時，使用ng build --prod是一種最佳實踐，它確保應用程序經過優化并準備好供最終用戶使用。

5. 使用ng generate來節省時間和避免錯誤

ng generate是Angular CLI中用來為Angular應用生成新文件和工件的命令，它可以用來生成各種不同的工件，比如組件、服務、指令等。

在為Angular應用創建新工件時，使用ng generate是一種最佳實踐。它確保在正確的位置創建新文件，并遵循推薦的結構和命名約定。

6. 使用ng add輕松增強您的應用程序

ng add是Angular CLI中的一個命令，它允許您向Angular應用中添加新的庫或包。它使安裝和配置過程自動化，從而更容易將新特性集成到項目中。在向Angular應用中添加新庫時，使用ng add是一種最佳實踐，因為它可以確保庫被正確安裝和配置。

7. 用快捷方式更快地工作

知道一些快捷鍵來加快您的工作流程總是很有幫助的，例如，您可以簡單地使用快捷鍵ng g c來快速生成一個新組件，替代輸入ng generate component。

下面是一些更有用的快捷方式：

• ng g s：ng generate service的快捷方式，用于生成新的服務。
• ng g m：ng generate module的快捷方式，用于生成新模塊。
• ng g d：ng generate directive的快捷方式，用于生成一個新指令。
• ng g p：ng generate pipe的快捷方式，用于生成新管道。

這些快捷方式可以節省時間，讓您更容易使用Angular CLI。

8. 跨項目共享代碼

當使用Angular CLI時，您可能想要創建一個新的庫來在工作空間中的多個項目之間共享代碼。為此您可以使用ng generate library命令，該命令在工作區的projects/ folder中創建一個新項目，可以在其中開發和發布可重用庫。通過使用ng generate library，您可以確保正確設置新庫，并遵循推薦的結構和約定。

9. 存儲有關構建過程的信息，確保應用順利運行

您可以使用ng build --stats-json命令來創建一個名為stats.json的文件，這個文件有很多關于應用構建的有用信息，比如bundle有多大，里面有什么。您可以將此文件與webpack-bundle-analyzer等工具一起使用，來查看應用中占用空間的內容，并找到使其更小、更快的方法，這是保持應用程序平穩運行的好方法！

10. 確保代碼按預期工作

Angular CLI提供了一個命令ng test來在項目中運行單元測試，這個命令執行Karma測試運行器，它是用項目根目錄下的Karma .conf.js文件配置的。

例如，假設我們有一個顯示消息的簡單組件：

import { Component } from '@angular/core';

@Component({
selector: 'app-hello',
template: '<h1>Hello, {{name}}!</h1>'
})
export class HelloComponent {
name = 'World';
}

我們可以為這個組件寫一個單元測試來檢查它是否顯示了正確的消息:

import { TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [HelloComponent]
});
});

it('should display the correct message', () => {
const fixture = TestBed.createComponent(HelloComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Hello, World!');
});
});

輸出：

使用ng test是一種很好的方法，可以確保我們的代碼正常工作，并在開發早期發現任何問題。

總之，Angular CLI是一個強大的工具，可以幫助開發人員簡化工作流程，優化Angular應用程序。通過遵循本文中概述的最佳實踐和專業技巧，開發人員可以充分利用Angular CLI的特性和功能來創建高質量、高性能的應用程序。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論