问题背景
在开发 Angular 项目时，会发现每次使用 ng new 命令创建新项目后，会生成大量的文件和目录。这些文件包括但不限于 .ts, .js, .html, .scss 等不同类型的代码文件以及 .json, .xml, .yml 等配置文件，甚至还包含一些无用的 demo 用例文件。对于一个小型应用而言，这些文件数量就已经非常庞大了，更何况是一个大型项目。
如下所示为一个简单的 Angular 项目文件结构：
-- -------------------- ---- ------- ------- --- ---- - --- ------------------ - --- ---- - - --- --------------- - - --- --------- - --- ------------- --- ---- - --- ---- - - --- ----------------- - - --- ------------------ - - --- --------------------- - - --- ---------------- - - --- ------------- - - --- ----------- - - --- ------------ - - --- ------------------------- - - --- -------------------------- - - --- ----------------------------- - - --- ------------------------ - --- ------- - - --- -------- - --- ------------- - - --- ------------------- - - --- -------------- - --- ----------- - --- ---------- - --- ------- - --- ------------ - --- ---------- - --- ------- --- ------------- --- ---------- --- ------------ --- ------------ --- --------- --- ----------------- --- ------------- --- ------------------ --- -----------
可以看到，即使是一个非常简单的项目，在文件层面也已经非常复杂。这种情况在大型项目中尤为严重，会导致开发和维护成本的增加。
问题原因
Angular 项目生成大量文件的原因主要有以下几个：
ng new命令在初始化项目时会自动安装一些依赖包，这些包的大小可能非常庞大，从而导致了生成大量的文件。- Angular 项目采用了模块化的设计思想，每个组件、服务、指令等都需要对应一个文件来实现，这也是导致文件数量增多的原因之一。
- Angular 项目使用了许多配置文件来管理不同的环境、构建、测试等场景，这些文件也占据了一定的文件数量。
解决方案
针对以上问题，我们可以采取以下措施来解决：
- 可以考虑使用
ng new命令的--minimal选项来创建项目，这样可以避免一些不必要的依赖和文件。 - 对于一些简单的组件或服务，可以考虑将它们合并到一个文件中，从而减少文件数量。但是对于复杂的模块，还是需要遵循模块化原则进行拆分。
- 可以使用一些工具来管理配置文件，比如 dotenv 来管理环境变量、angular.json 来管理构建选项等。
实例代码
使用 --minimal 选项创建项目
ng new my-app --minimal
合并组件代码示例
import { Component } from '@angular/core';
@Component({
selector: 'app-h
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/24991) ，转载请注明来源
[https://www.javascriptcn.com/post/24991](https://www.javascriptcn.com/post/24991)