I have a problem using Syncfusion "17.4.51" with an angular project I upgraded to angular 9. If I build with optimization set to true I get the following weird error:
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/ **
Here's an extract from my 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"
}
]
},
It works if I turn optimization off, but I'm not sure if that is what I want since it used to build fine with angular 8. I had thought initially that it was because I had ahead of time compilation on, but that seems to not be the case.
Does anyone have any idea what I am missing, or does syncfusion just not work with optimization?
Here is my package.json too:
{
"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"
}
}
Also please let me know if I should provide any additional information?
So it turns out that we had hacks in our HTML/CSS that were for IE specifically and when we removed them the issue went away.
Sadly I can't say exactly why this caused an issue, but in the interest of finding some resolution here is an example of such a hack:
<!--[if !IE]>
.text-icon > :nth-child(1n) {
flex: 1 1 0;
}
<![endif]-->
We removed these throughout our codebase and the issue went away.
This doesn't seem to be a Syncfusion specific issue, but rather related to upgrading from Angular 8 to Angular 9 as the issue was the same even without Syncfusion in the repo at all.