Angular--.angular-cli.json页面说明书

不念不忘少年蓝@ 2021-09-27 05:52 366阅读 0赞

*  前言
 *  内容
 *  总结
 *  end

# 前言 #

最近一直在学习使用Angular的开发，因为初学，所以在这方面有很多都不清楚，之前总结了一篇关于WebStorm界面的博客，然后今天遇到了问题，具体请见我另一篇博客：：[Angular–ERROR in multi script-loader!][Angular_ERROR in multi script-loader]，所以在这里详细解说一下`.angular-cli-json`页面

# 内容 #

直接上代码，最真实，代码如下：

{
        "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
        "project": {
            "name": "soft-h"                      //项目名称
             "ejected": false                     // 标记该应用是否已经执行过eject命令把webpack配置释放出来
        },
        "apps": [{
            "root": "src",                        //源码根目录
            "outDir": "dist",                     //编译后的输出目录，默认为dist
            "assets": [                           //记录资源文件夹，构建时复制到`outDir`指定的目录
                "assets",
                "logo.ico"                        //网站ico图标
            ],
            "index": "index.html",                //指定首页文件，默认值为"index.html"
            "main": "main.ts",                    //指定应用的入门文件
            "polyfills": "polyfills.ts",          // 指定polyfill文件
            "test": "test.ts",                    //指定测试入门文件
            "tsconfig": "tsconfig.app.json",      //指定tsconfig文件
            "testTsconfig": "tsconfig.spec.json", // 指定TypeScript单测脚本的tsconfig文件
            "prefix": "app",                      //使用ng g 命令时，自动为selector元数据的值添加的前缀名
            "styles": [                           //引入全局样式，构建时会打包进来，常用于第三方库引用样式
                "../node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [                          // 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
                "../node_modules/jquery/dist/jquery.min.js",
                "../node_modules/bootstrap/dist/js/bootstrap.js"
            ],
            "environmentSource": "environments/environment.ts",  //基础环境配置
            "environments": {                     //子环境配置文件
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }],
        "e2e": {
            "protractor": {
                "config": "./protractor.conf.js"
            }
        },
        "lint": [{
                "project": "src/tsconfig.app.json",
                "exclude": "**/node_modules/**"
            },
            {
                "project": "src/tsconfig.spec.json",
                "exclude": "**/node_modules/**"
            },
            {
                "project": "e2e/tsconfig.e2e.json",
                "exclude": "**/node_modules/**"
            }
        ],
        "test": {
            "karma": {
                "config": "./karma.conf.js"
            }
        },
        "defaults": {                             //执行 ng g 命令时的一些默认值
           "styleExt": "sass",                    //默认生成的样式文件后缀名
            "component": {
             "flat": false,              // 生成组件时是否新建文件夹包装组件文件，默认为false（即新建文件夹）
             "spec": true,                        // 是否生成spec文件，默认为true
             "inlineStyle": false,                // 新建时是否使用内联样式，默认为false
              "inlineTemplate": false,            // 新建时是否使用内联模板，默认为false
              "viewEncapsulation": "Emulated",    // 指定生成的组件的元数据viewEncapsulation的默认值
               "changeDetection": "OnPush",       // 指定生成的组件的元数据changeDetection的默认值
                }
        }
    }

# 总结 #

有些重复的文字就没有书写了，看完这些代码以及注释之后应该会对`.angular-cli.json`有一定的了解了吧！

# end #

谢谢您的阅读，如有宝贵意见请在下面留言！

[Angular_ERROR in multi script-loader]: https://blog.csdn.net/Luojun13Class/article/details/81324005