如果你有 --optimization on with syncfusion "17.4.51"，我会遇到一个奇怪的构建问题
If you have --optimization on with syncfusion "17.4.51", I get a weird build issue
我在升级到 angular9 的 angular 项目中使用 Syncfusion“17.4.51”时遇到问题。如果我将优化设置为 true 进行构建，我会收到以下奇怪的错误：
ng serve -c=dev
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
chunk {} runtime.js, runtime.js.map (runtime) 1.49 kB [entry] [rendered]
chunk {1} main.js, main.js.map (main) 452 bytes [initial] [rendered]
chunk {2} polyfills.js, polyfills.js.map (polyfills) 168 bytes [initial] [rendered]
chunk {3} styles.js, styles.js.map (styles) 3.61 MB [initial] [rendered]
chunk {4} vendor.js, vendor.js.map (vendor) 146 kB [initial] [rendered]
Date: 2020-03-06T11:05:12.264Z - Hash: 7ef4d1671de0c1866c3f - Time: 13120ms
ERROR in Cannot read property 'trim' of undefined
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
这是我的 angular.json
的摘录
"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
]
},
如果我关闭优化，它会起作用，但我不确定这是否是我想要的，因为它过去使用 angular8 可以很好地构建。我最初认为这是因为我领先时间编译，但似乎并非如此。
有谁知道我遗漏了什么，或者 syncfusion 是否不适用于优化？
这也是我的 package.json：
{
"name": "angular-template",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^9.0.5",
"@angular/cdk": "^9.0.1",
"@angular/common": "9.0.5",
"@angular/compiler": "^9.0.5",
"@angular/core": "9.0.5",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "^9.0.5",
"@angular/localize": "^9.0.5",
"@angular/material": "^9.0.1",
"@angular/platform-browser": "^9.0.5",
"@angular/platform-browser-dynamic": "^9.0.5",
"@angular/router": "^9.0.5",
"@ng-bootstrap/ng-bootstrap": "^5.1.5",
"@ngtools/webpack": "^1.2.4",
"@syncfusion/ej2-angular-base": "^17.4.51",
"@syncfusion/ej2-angular-buttons": "^17.4.51",
"@syncfusion/ej2-angular-grids": "^17.4.51",
"@syncfusion/ej2-angular-pivotview": "17.4.51",
"@types/file-saver": "2.0.1",
"@types/lodash": "^4.14.149",
"angular-calendar": "^0.28.2",
"bootstrap": "^3.4.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.6.4",
"date-fns": "^2.9.0",
"file-saver": "^2.0.2",
"google-maps": "^4.2.3",
"intl": "^1.2.5",
"lodash": "^4.17.15",
"mdn-polyfills": "^5.19.0",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-ckeditor": "^1.2.6",
"ng2-dragula": "^2.1.1",
"ng4-click-outside": "^1.0.1",
"ngx-bootstrap": "^5.3.2",
"raven-js": "^3.27.2",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.5",
"@angular/cli": "^9.0.5",
"@angular/compiler-cli": "^9.0.5",
"@types/googlemaps": "^3.39.2",
"@types/jasmine": "^3.5.0",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~3.1.0",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "~5.4.2",
"ts-node": "~8.6.2",
"tslint": "~5.20.1",
"typescript": "~3.7.5"
}
}
另外请告诉我是否需要提供任何其他信息？
我认为您 tsconfig.json 中的目标应该是 "target": "es2015"。
通过将优化设置为 true（默认情况下优化为 true）验证了您报告的问题并且无法重现该问题。在 Angular 8 中准备了 angular 示例，然后我们使用“ng update @angular/cli @angular/core 将 angular 版本更新到最新版本 (9.0.6) –allow-dirty –force”命令。
angular latest version update
在提供样品时没有遇到您提到的任何问题。附上样本here.
serving
事实证明，我们的 HTML/CSS 中有专门针对 IE 的黑客攻击，当我们删除它们时，问题就消失了。
遗憾的是，我不能确切地说出这导致问题的原因，但为了找到一些解决方案，这里有一个这样的 hack 示例：
<!--[if !IE]>
.text-icon > :nth-child(1n) {
flex: 1 1 0;
}
<![endif]-->
我们在整个代码库中删除了这些，问题就消失了。
这似乎不是 Syncfusion 特有的问题，而是与从 Angular 8 升级到 Angular 9 有关，因为即使在回购中根本没有 Syncfusion，问题也是一样的.
我在升级到 angular9 的 angular 项目中使用 Syncfusion“17.4.51”时遇到问题。如果我将优化设置为 true 进行构建，我会收到以下奇怪的错误：
ng serve -c=dev
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
chunk {} runtime.js, runtime.js.map (runtime) 1.49 kB [entry] [rendered]
chunk {1} main.js, main.js.map (main) 452 bytes [initial] [rendered]
chunk {2} polyfills.js, polyfills.js.map (polyfills) 168 bytes [initial] [rendered]
chunk {3} styles.js, styles.js.map (styles) 3.61 MB [initial] [rendered]
chunk {4} vendor.js, vendor.js.map (vendor) 146 kB [initial] [rendered]
Date: 2020-03-06T11:05:12.264Z - Hash: 7ef4d1671de0c1866c3f - Time: 13120ms
ERROR in Cannot read property 'trim' of undefined
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
这是我的 angular.json
的摘录"qa": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
]
},
如果我关闭优化，它会起作用，但我不确定这是否是我想要的，因为它过去使用 angular8 可以很好地构建。我最初认为这是因为我领先时间编译，但似乎并非如此。
有谁知道我遗漏了什么，或者 syncfusion 是否不适用于优化？
这也是我的 package.json：
{
"name": "angular-template",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular/animations": "^9.0.5",
"@angular/cdk": "^9.0.1",
"@angular/common": "9.0.5",
"@angular/compiler": "^9.0.5",
"@angular/core": "9.0.5",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "^9.0.5",
"@angular/localize": "^9.0.5",
"@angular/material": "^9.0.1",
"@angular/platform-browser": "^9.0.5",
"@angular/platform-browser-dynamic": "^9.0.5",
"@angular/router": "^9.0.5",
"@ng-bootstrap/ng-bootstrap": "^5.1.5",
"@ngtools/webpack": "^1.2.4",
"@syncfusion/ej2-angular-base": "^17.4.51",
"@syncfusion/ej2-angular-buttons": "^17.4.51",
"@syncfusion/ej2-angular-grids": "^17.4.51",
"@syncfusion/ej2-angular-pivotview": "17.4.51",
"@types/file-saver": "2.0.1",
"@types/lodash": "^4.14.149",
"angular-calendar": "^0.28.2",
"bootstrap": "^3.4.1",
"classlist.js": "^1.1.20150312",
"core-js": "^3.6.4",
"date-fns": "^2.9.0",
"file-saver": "^2.0.2",
"google-maps": "^4.2.3",
"intl": "^1.2.5",
"lodash": "^4.17.15",
"mdn-polyfills": "^5.19.0",
"ng-multiselect-dropdown": "^0.2.10",
"ng2-ckeditor": "^1.2.6",
"ng2-dragula": "^2.1.1",
"ng4-click-outside": "^1.0.1",
"ngx-bootstrap": "^5.3.2",
"raven-js": "^3.27.2",
"rxjs": "^6.5.4",
"rxjs-compat": "^6.5.4",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.5",
"@angular/cli": "^9.0.5",
"@angular/compiler-cli": "^9.0.5",
"@types/googlemaps": "^3.39.2",
"@types/jasmine": "^3.5.0",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "~3.1.0",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "~5.4.2",
"ts-node": "~8.6.2",
"tslint": "~5.20.1",
"typescript": "~3.7.5"
}
}
另外请告诉我是否需要提供任何其他信息？
我认为您 tsconfig.json 中的目标应该是 "target": "es2015"。
通过将优化设置为 true（默认情况下优化为 true）验证了您报告的问题并且无法重现该问题。在 Angular 8 中准备了 angular 示例，然后我们使用“ng update @angular/cli @angular/core 将 angular 版本更新到最新版本 (9.0.6) –allow-dirty –force”命令。
angular latest version update
在提供样品时没有遇到您提到的任何问题。附上样本here.
serving
事实证明，我们的 HTML/CSS 中有专门针对 IE 的黑客攻击，当我们删除它们时，问题就消失了。
遗憾的是，我不能确切地说出这导致问题的原因，但为了找到一些解决方案，这里有一个这样的 hack 示例：
<!--[if !IE]>
.text-icon > :nth-child(1n) {
flex: 1 1 0;
}
<![endif]-->
我们在整个代码库中删除了这些，问题就消失了。
这似乎不是 Syncfusion 特有的问题，而是与从 Angular 8 升级到 Angular 9 有关，因为即使在回购中根本没有 Syncfusion，问题也是一样的.