背景
- 从angularjs升级到angular8, 对应ui-grid不支持。
- 寻找替代方案，入门可以参考。
小插曲
- 基于组件思想，尝试把组件样式，放到组件同级目录
- 将ag-grid css样式引入到app.component.scss中，非styles.css中
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css" ;- 界面样式，心里立刻万马奔腾~
- 基于之前的ngular组件样式封装，立刻想到可能是组件样式封装问题。
- app.component.ts中修改如下，效果立刻恢复~
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation:ViewEncapsulation.None //样式不进行封装
})
真的是样式封装的问题吗？
package.json 存在如下配置
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},angular.json存在如下配置
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ag-grid-demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ag-grid-demo:build"
},
"configurations": {
"production": {
"browserTarget": "ag-grid-demo:build:production"
}
}
},
"extract-i18n": {
...
},
"test": {
....
},
"lint": {
...
},
"e2e": {
...
}
}* 这两者是如此的相似？* ， 上述原因会不会因为打包，没有把组件样式打包呢？ 仅仅打包全局样式？
angular.json schema如何查找
- angular.json有段如下配置
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",angular.json schema 查看
angular.json整体结构
"$schema": {
"type": "string"
},
"version": {
"$ref": "#/definitions/fileVersion"
},
"cli": {
"$ref": "#/definitions/cliOptions"
},
"schematics": {
"$ref": "#/definitions/schematicOptions"
},
"newProjectRoot": {
"type": "string",
"description": "Path where new projects will be created."
},
"defaultProject": {
"type": "string",
"description": "Default project name used in commands."
},
"projects": {
"type": "object",
"patternProperties": {
"^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$": {
"$ref": "#/definitions/project"
}
},
"additionalProperties": false
} "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
....
},
"defaultProject": "ag-grid-demo"基于此时，小伙伴你发现了什么吗？
查看其中关键的 projects
"projects": {
"type": "object",
"patternProperties": {
"^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$": {
"$ref": "#/definitions/project"
}
},
"additionalProperties": false
}patternProperties 让我们去找 #/definitions/project ，这是什么？ html里面的锚点，我们试着在同文档中查找
看definitions/project
"definitions":{
"project":{
...
"architect": {
"type": "object",
"additionalProperties": {
"$ref": "#/definitions/project/definitions/target"
}
},
}
...
}再看architect → definitions/project/definitions/target
"target": {
"oneOf": [
{
"$comment": "Extendable target with custom builder",
"type": "object",
"properties": {
"builder": {
"type": "string",
"description": "The builder used for this package.",
"not": {
"enum": [
"@angular-devkit/build-angular:app-shell",
"@angular-devkit/build-angular:browser",
"@angular-devkit/build-angular:dev-server",
"@angular-devkit/build-angular:extract-i18n",
"@angular-devkit/build-angular:karma",
"@angular-devkit/build-angular:protractor",
"@angular-devkit/build-angular:server",
"@angular-devkit/build-angular:tslint"
]
}
},
"options": {
"type": "object"
},
"configurations": {
"type": "object",
"description": "A map of alternative target options.",
"additionalProperties": {
"type": "object"
}
}
},
"required": [
"builder"
]
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:app-shell" },
"options": { "$ref": "#/definitions/targetOptions/definitions/appShell" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/appShell" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:browser" },
"options": { "$ref": "#/definitions/targetOptions/definitions/browser" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/browser" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:dev-server" },
"options": { "$ref": "#/definitions/targetOptions/definitions/devServer" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/devServer" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:extract-i18n" },
"options": { "$ref": "#/definitions/targetOptions/definitions/extracti18n" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/extracti18n" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:karma" },
"options": { "$ref": "#/definitions/targetOptions/definitions/karma" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/karma" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:protractor" },
"options": { "$ref": "#/definitions/targetOptions/definitions/protractor" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/protractor" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:server" },
"options": { "$ref": "#/definitions/targetOptions/definitions/server" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/server" }
}
}
},
{
"type": "object",
"properties": {
"builder": { "const": "@angular-devkit/build-angular:tslint" },
"options": { "$ref": "#/definitions/targetOptions/definitions/tslint" },
"configurations": {
"type": "object",
"additionalProperties": { "$ref": "#/definitions/targetOptions/definitions/tslint" }
}
}
}
]
}server 看到
"stylePreprocessorOptions": {
"description": "Options to pass to style preprocessors",
"type": "object",
"properties": {
"includePaths": {
"description": "Paths to include. Paths will be resolved to project root.",
"type": "array",
"items": {
"type": "string"
},
"default": []
}
},
"additionalProperties": false
},此时小伙伴，你想到了什么
本文作者：前端首席体验师(CheongHu)
联系邮箱：simple2012hcz@126.com
