背景
- 從angularjs升級到angular8, 對應(yīng)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中修改如下，效果立刻恢復(fù)~
@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整體結(jié)構(gòu)
"$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"
基于此時，小伙伴你發(fā)現(xiàn)了什么嗎？
查看其中關(guān)鍵的 projects
"projects": {
"type": "object",
"patternProperties": {
"^[a-zA-Z][.0-9a-zA-Z]*(-[.0-9a-zA-Z]*)*$": {
"$ref": "#/definitions/project"
}
},
"additionalProperties": false
}
patternProperties 讓我們?nèi)フ?/strong> #/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)
聯(lián)系郵箱：simple2012hcz@126.com
版權(quán)聲明： 本文章除特別聲明外，均采用 CC BY-NC-SA 4.0 許可協(xié)議。轉(zhuǎn)載請注明出處！
