Angular项目的结构配置

首先

我平时工作中经常使用Angular。最近,我对设置文件进行的修改机会增多了。另外,虽然官方提供了关于工作空间和项目文件结构的页面,但在我的环境中有些许不同。我会把各个文件的作用总结成备忘录并记录下来。

环境

我使用以下环境进行了项目创建:
MacBookPro Monterey M1
npm版本:8.6.0
Angular CLI版本:13.3.1
Node版本:12.22.11

项目创建的设置

我创建了一个项目,并使用默认设置。

% ng new my-app

% Would you like to add Angular routing? (y/N)  // N
% Which stylesheet format would you like to use? (Use arrow keys) // CSS

项目构成

我会确认所创建项目的结构。这次我会说明项目的根目录下的文件和文件夹。

% cd my-app
% ls -l
total 1592
-rw-r--r--    1 user.name  staff    1059  6  3 07:53 README.md
-rw-r--r--    1 user.name  staff    3039  6  3 07:53 angular.json
-rw-r--r--    1 user.name  staff    1423  6  3 07:53 karma.conf.js
drwxr-xr-x  601 user.name  staff   19232  6  3 07:54 node_modules
-rw-r--r--    1 user.name  staff  784470  6  3 07:54 package-lock.json
-rw-r--r--    1 user.name  staff    1069  6  3 07:53 package.json
drwxr-xr-x   11 user.name  staff     352  6  3 07:53 src
-rw-r--r--    1 user.name  staff     287  6  3 07:53 tsconfig.app.json
-rw-r--r--    1 user.name  staff     863  6  3 07:53 tsconfig.json
-rw-r--r--    1 user.name  staff     333  6  3 07:53 tsconfig.spec.json

请阅读我的说明文件。

以Markdown格式编写关于该项目的说明和启动方法的文件。

角度 . JSON

设置CLI的默认配置,以针对工作区内的所有项目。定义CLI使用的构建、服务和测试工具的配置选项。

karma.conf.js – karma配置.js

应用程序特定的Karma设置。Karma是一种用于生成用于显示测试代码执行结果的Web服务器的工具。在Angular中,它用于显示使用jamine编写的测试的覆盖率。

模块节点

通过npm命令安装的npm包所在的文件夹。

package-lock.json -> 包锁定文件 suǒ

由npm客户端自动生成的文件,其中包含已安装在node_modules目录下的所有包的版本信息。
基本上不需要手动修改。

包配置文件

在工作空间中,配置所有项目可用的npm包的依赖关系。有关具体的格式和文件内容,请参考npm文档。
可以在脚本中编写启动命令的缩写形式。

请帮我把以下内容用中文进行本地化,只需要一个选项:

src

包含应用程序源文件的文件夹。

tsconfig.app.json 的中文翻译可以是:应用程序 tsconfig.json。

包含TypeScript和Angular模板编译器选项的应用程序特定的TypeScript配置。

tsconfig.json文件

TypeScript的基本设置适用于工作区的项目。

tsconfig.spec.json的释义是什么?

用于应用测试的TypeScript配置。请参考TypeScript配置。

请参考

    • Angular公式 ワークスペースとプロジェクトのファイル構造

 

    [Angular] Angular CLI で作成したプロジェクト構成をみる

最后

这次我描述了Angular项目的结构。将这些文件转化为文字后,我能更好地理解它们的功能。如果我能进一步详细地写下来,我会进行补充。

广告
将在 10 秒后关闭
bannerAds