angular.json配置的styles文件插入到了body中
时间: 2024-05-10 08:17:33 浏览: 8
在 Angular CLI 中,可以在 `angular.json` 文件中配置应用程序的构建选项,其中包括样式表的配置。默认情况下,CLI 会将样式表添加到 `head` 标签中,但是我们可以通过 `styles` 数组的 `inject` 属性来控制样式表的注入方式。
如果设置 `inject` 为 `true`,则样式表将被注入到 `head` 标签中。如果设置 `inject` 为 `false`,则样式表将被注入到 `body` 标签中。
例如,以下是将样式表注入到 `body` 标签中的 `angular.json` 配置示例:
```json
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
{
"input": "src/styles.css",
"inject": false
}
]
}
}
}
}
}
}
```
需要注意的是,将样式表注入到 `body` 标签中可能会导致性能问题,因为它会阻塞页面的渲染。因此,建议只在必要时使用这种注入方式。
相关问题
angular.json文件解析
angular.json是Angular CLI的配置文件,它用于配置Angular项目的各种构建选项。该文件包含了项目的各种配置信息,例如构建选项、构建目标、环境变量等等。下面是一个angular.json文件的示例:
```json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json", "assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
}
}
}
},
"defaultProject": "my-app"
}
```
在这个示例中,我们可以看到该文件定义了一个名为“my-app”的项目,其中包含了“build”、“serve”、“extract-i18n”和“test”四个构建目标。每个构建目标都有自己的构建选项和配置信息。
angular.json怎么加载的
angular.json是Angular CLI的配置文件,用于配置Angular项目的构建、部署、测试等各个方面。
在使用Angular CLI创建项目时,会自动创建angular.json文件,并默认配置一些基础设置,如项目名称、源码目录、输出目录、开发服务器端口等。
在使用Angular CLI构建、部署、测试等命令时,会读取angular.json文件中的配置进行相应操作。比如,使用ng serve命令启动开发服务器时,就会读取angular.json文件中的"serve"属性进行配置。
在开发过程中,如果需要修改项目的配置,可以直接修改angular.json文件。修改后,再次执行相应的命令即可生效。
总之,angular.json文件是Angular CLI项目的重要配置文件,用于控制项目的各个方面,开发者需要对其进行熟练掌握。