前言
Angular 是一款流行的前端框架，但在实际开发中，我们经常需要对 Angular CLI 进行自定义配置来适应项目需求。而这些自定义配置在 Angular CLI 中是不提供原生支持的，因此我们需要使用一些第三方工具来解决这个问题，其中，angular-cli-patched 就是其中之一。
angular-cli-patched 是一个基于 Angular CLI 的增强工具，它通过补丁包的方式将一些常见的自定义功能集成到 Angular CLI 中，使得我们能够更加灵活地进行定制化开发。本文将对 angular-cli-patched 的使用进行详细介绍，并探讨其应用于实际项目中的指导意义。
安装 angular-cli-patched
在使用 angular-cli-patched 之前，我们需要先安装 Angular CLI：
npm install -g @angular/cli
然后再安装 angular-cli-patched：
npm install -g angular-cli-patched
使用 angular-cli-patched
1. 自定义端口号和代理
在默认情况下，Angular CLI 使用的是 4200 端口来监听开发服务器。而有时候我们需要根据实际情况修改端口号，比如说避免与其他项目的端口号冲突。此时，我们可以使用 angular-cli-patched 提供的端口号自定义功能来修改端口号：
ng serve --port 8080
除了端口号之外，我们还可以借助 angular-cli-patched 来配置代理，比如说将请求代理到本地的 NodeJS 服务器上。首先，我们需要在 angular.json 文件中添加一个 proxy 配置项：
-- -------------------- ---- -------
-
---
-------- -
---------- -------------------------------------------
---------- -
---------------- ---------------
-------------- -----------------
--
---
--
---
-然后，我们需要创建一个名为 proxy.conf.json 的配置文件，指定需要代理的地址和端口号：
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}最后，我们运行开发服务器，并通过参数配置使用该代理：
ng serve --proxy-config proxy.conf.json
2. TypeScript 配置
在 Angular 项目中，TypeScript 是默认的编程语言。而在实际开发中，我们常常需要自定义 TypeScript 的编译选项。在默认情况下，Angular CLI 会自动根据 tsconfig.json 文件中的配置对 TypeScript 进行编译。但如果我们需要进行更加细粒度的配置，比如说自定义目标版本号、开启 strictNullChecks 等，这时候就需要使用 angular-cli-patched 提供的 TypeScript 配置功能。
首先，我们需要在 angular.json 文件中指定 TypeScript 编译器所需的配置选项，比如说设置目标版本为 ES6、开启 strictNullChecks：
-- -------------------- ---- -------
-
---
-------- -
---------- ----------------------------------------
---------- -
---
----------- ----------------
-------------------- -
--------- ------
------------------- ----
-
-
---
--
---
-然后，我们只需要运行下面的命令即可使用该 TypeScript 配置：
ng build --ts-config tsconfig.json.patch
其中，tsconfig.json.patch 是我们自己编写的覆盖文件，指定了需要更改的配置选项。
3. 其他功能
除了上述两个常见的需求之外，angular-cli-patched 还提供了许多其他自定义功能，比如说：
- 注入全局变量：通过 globalVariables 选项来指定需要注入到全局对象中的变量。
- 开启 Sass：通过 style 设置为 scss 来开启 Sass。
- 是否使用 tslint：通过 tslintEnable 选项来决定是否启用 tslint。
结论
通过本文的介绍，我们对 angular-cli-patched 的使用方式有了更加详细的了解。通过灵活运用 angular-cli-patched，我们可以更加便捷地实现一些自定义需求，提高开发效率和开发体验。同时，我们也可以借此探讨一些基于 Angular CLI 的扩展工具在实际开发中的应用，以及如何根据项目需要进行合理的技术选型和技术方案设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725c81e8991b448e8872