Default Theme import - Out of memory

[Jahrenski]

• Bug report

Current behavior

The serve/build process fails with error:

[ng] FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

When we import the kendo default styles from global.scss

@import "~@progress/kendo-theme-default/scss/all";

Expected behavior

Manage to build without error.

Environment

Product:

• Kendo Ui for Angular

Package versions:

+-- @angular-devkit/architect@0.10.7
+-- @angular-devkit/build-angular@0.10.7
+-- @angular-devkit/core@7.1.1
+-- @angular-devkit/schematics@7.1.1
+-- @angular/animations@7.1.1
+-- @angular/cdk@7.1.1
+-- @angular/cli@7.1.1
+-- UNMET PEER DEPENDENCY @angular/common@7.1.1
+-- UNMET PEER DEPENDENCY @angular/compiler@7.1.1
+-- @angular/compiler-cli@7.1.1
+-- UNMET PEER DEPENDENCY @angular/core@7.1.1
+-- @angular/forms@7.1.1
+-- @angular/http@7.1.1
+-- @angular/language-service@7.1.1
+-- @angular/material@7.1.1
+-- @angular/platform-browser@7.1.1
+-- @angular/platform-browser-dynamic@7.1.1
+-- @angular/router@7.1.1
+-- @ionic-native/barcode-scanner@5.0.0-beta.22
+-- UNMET PEER DEPENDENCY @ionic-native/core@5.0.0-beta.22
+-- @ionic-native/device@5.0.0-beta.22
+-- @ionic-native/diagnostic@5.0.0-beta.22
+-- @ionic-native/file@5.0.0-beta.22
+-- @ionic-native/in-app-browser@5.0.0-beta.22
+-- @ionic-native/keyboard@5.0.0-beta.22
+-- @ionic-native/network@5.0.0-beta.22
+-- @ionic-native/splash-screen@5.0.0-beta.21
+-- @ionic-native/status-bar@5.0.0-beta.21
+-- @ionic/angular@4.0.0-beta.16
+-- @ionic/angular-toolkit@1.2.0
+-- @ngx-translate/core@11.0.1
+-- @ngx-translate/http-loader@4.0.0
+-- @progress/kendo-angular-buttons@4.3.2
+-- @progress/kendo-angular-dateinputs@3.5.1
+-- @progress/kendo-angular-dialog@3.9.0
+-- @progress/kendo-angular-dropdowns@3.4.0
+-- @progress/kendo-angular-excel-export@2.2.0
+-- @progress/kendo-angular-grid@3.10.0
+-- @progress/kendo-angular-inputs@3.4.0
+-- @progress/kendo-angular-intl@1.6.1
+-- @progress/kendo-angular-l10n@1.3.0
+-- @progress/kendo-angular-layout@3.2.0
+-- @progress/kendo-angular-scrollview@2.1.0
+-- @progress/kendo-angular-upload@4.2.2
+-- @progress/kendo-data-query@1.5.0
+-- @progress/kendo-drawing@1.5.7
+-- @progress/kendo-theme-default@2.61.0
+-- @tinymce/tinymce-angular@2.3.2
+-- @types/jasmine@2.8.12
+-- @types/jasminewd2@2.0.6
+-- @types/node@10.12.11
+-- angular-svg-round-progressbar@2.0.0
+-- angular2-moment@1.9.0
+-- angular2-virtual-scroll@0.4.16
+-- codelyzer@4.5.0
+-- cordova-plugin-device@2.0.2
+-- cordova-plugin-file@6.0.1
+-- cordova-plugin-inappbrowser@3.0.0
+-- cordova-plugin-ionic-keyboard@2.1.3
+-- cordova-plugin-network-information@2.0.1
+-- cordova.plugins.diagnostic@4.0.10
+-- core-js@2.5.7
+-- crypto-js@3.1.9-1
+-- firebase@5.6.0
+-- jasmine-core@2.99.1
+-- jasmine-spec-reporter@4.2.1
+-- jquery@3.3.1
+-- karma@3.0.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.4
+-- karma-jasmine@1.1.2
+-- karma-jasmine-html-reporter@0.2.2
+-- localforage@1.7.3
+-- ng-drag-drop@5.0.0
+-- ng-inline-svg@8.2.2
+-- ng2-logger@2.0.35
+-- phonegap-plugin-barcodescanner@8.0.1
+-- protractor@5.4.1
+-- rxjs@6.3.3
+-- rxjs-compat@6.3.3
+-- ts-node@7.0.1
+-- tslint@5.11.0
+-- typescript@3.1.6
`-- zone.js@0.8.26

npm ERR! peer dep missing: @angular/common@^6.0.0, required by angular-svg-round-progressbar@2.0.0
npm ERR! peer dep missing: @angular/compiler@^6.0.0, required by angular-svg-round-progressbar@2.0.0
npm ERR! peer dep missing: @angular/core@^6.0.0, required by angular-svg-round-progressbar@2.0.0
npm ERR! peer dep missing: @angular/core@>=2.0.0 <6.0.0, required by angular2-moment@1.9.0
npm ERR! peer dep missing: @ionic-native/core@5.0.0-beta.21, required by @ionic-native/splash-screen@5.0.0-beta.21
npm ERR! peer dep missing: @ionic-native/core@5.0.0-beta.21, required by @ionic-native/status-bar@5.0.0-beta.21

Browser:

• Chrome (desktop) version

System:

• TypeScript version: Version 3.2.1
• Node version: v10.14.0 and 6.4.1
• Platform: Windows 10 x64

Note that the build works without the kendo style import.

[tsvetomir]

Theme compilation seems to work in a new Angular CLI project in my tests. Is your application scaffolded using it or the Ionic CLI?

Are you customizing theme variables? If not, you can reference dist/all.css directly in angular.json. See https://github.com/telerik/kendo-angular/issues/1678#issuecomment-406564634

[Jahrenski]

I am currently importing from angular.json as the @import gives me this problem. Like so: "projects": { "app": { "architect": { "build": { "options": { "styles": [ { "input": "node_modules/@progress/kendo-theme-default/dist/all.css" } ], } } } } }

I am not certain what you mean by scaffolded?

[tsvetomir]

Using the pre-built CSS would result in the fastest builds, although the output bundle will contain the styles for all components. Using @import allows you to pick and customize specific components.

By scaffolded I mean created, sorry. More precisely, is the project created using ionic start or ng new? We'd appreciate it if you can share a trimmed-down version of the project that has this same issues.

[Jahrenski]

Ah makes sense. I created the project from ionic start. As for sharing a trimmed-down project it might be complicated as this is quite a big enterprise project. I will try to find the smallest reproducible case.

[tsvetomir]

Thanks - feel free to skip this if it's taking too much of your time.

On a side note, we're considering if referencing the SCSS styles directly is a good idea after all. It slows down the builds and can lead to subtle bugs due to project settings - auto prefixer, etc.

A safer way to approach this is to build a customized theme from source once and share it across your projects. See Using the Build Process of the Themes.

[tsvetomir]

Another possible solution is to include the styles only for the components in use, e.g.

@import "~@progress/kendo-theme-default/scss/panelbar";
@import "~@progress/kendo-theme-default/scss/grid";
...

This will speed up the builds and reduce the bundle size. It's not terribly efficient as we're still building the theme from source on each run, but there's certainly a convenience to it.

[Jahrenski]

Good idea! I find this solution to be good enough, I'm closing.