2025年应该怎样初始化 Angular 项目

type

status

date

slug

summary

首先推荐使用 pnpm。

使用 pnpm 创建一个新的 Angular 项目：

@angular/create 也是 Angular 官方提供的脚手架工具，不需要全局安装 Angular CLI，就可以创建 Angular 应用，并且支持所有 ng new 的选项和功能。

创建完成之后在 angular.json 中添加 "changeDetection": "OnPush"，具体路径位于 projects.[yourProjectName].schematics.@schematics/angular:component。

接下来是选择 UI 组件库。Angular 的 UI 组件库有很多，最常用的有：

这里推荐使用 Angular Material，因为它是 Angular 官方提供的 UI 组件库，和 Angular 的生态系统兼容性最好，文档也很完善。

除了组件库之外，我们还希望配置 Tailwind CSS 来编写样式。Tailwind CSS 是一个功能类优先的 CSS 框架，允许我们使用类名来构建样式，在 Angular 中使用也非常简单。

在项目根目录下创建 .postcssrc.json 文件，内容如下：

添加 @import "tailwindcss"; 到 src/styles.scss 文件中。

代码规范和格式化是团队开发中非常重要的一部分。我们使用 angular-eslint、prettier、husky 和 lint-staged 来实现代码规范和格式化。

首先安装 angular-eslint：

angular-eslint 会自动为我们配置 ESLint。

接下来安装 prettier、husky 和 lint-staged：

简单说一下这几个工具的作用：

初始化 husky：

这会在项目根目录下创建一个 .husky 文件夹，并在其中创建一个 pre-commit 钩子文件。

创建 .lintstagedrc 文件，内容如下：

在 .husky/pre-commit 文件中添加以下内容：

这样在提交代码时会自动运行 ESLint 和 Prettier，并且 Prettier 只格式化暂存区的文件。