Igniteui-angular: Samples do not work in StackBlitz

[tiliev]

Description

Samples do not work in StackBlitz because of Sass error. Further investigation is needed. We should find what is the cause of this and decide whether there is an issue at our end or it is a third-party issue related to StackBlitz. As @hanastasov pointed out, this might be connected with the older angular 5 config file we are currently using (this is a pending issue - https://github.com/IgniteUI/igniteui-angular-samples/issues/387). Judging by the error there is some issue with the ripple, perhaps a typo somewhere in the Sass.

• igniteui-angular version: 6.2.0-beta.4
• browser: Chrome, Firefox and Edge. It works in IE because we use CSS instead of Sass there.

Steps to reproduce

1. Go to https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_paging.html
2. Hit open in StackBlitz

Result

Error in igniteui-angular/lib/core/styles/base/utilities/_mixins.scss (228:12)
argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
sass/igniteui-angular/lib/core/styles/base/utilities/_mixins.scss:228, in function `map-get`
sass/igniteui-angular/lib/core/styles/base/utilities/_mixins.scss:228, in mixin `igx-root-css-vars`
sass/igniteui-angular/lib/core/styles/components/ripple/_ripple-theme.scss:38, in mixin `igx-ripple`
sass/igniteui-angular/lib/core/styles/themes/_index.scss:111, in mixin `igx-theme`
sass/~/styles.scss:4

Expected result

The sample should work.

Details

The issue is introduced in version 6.2.0-beta.4. The samples work correctly with 6.2.0-beta.3 - https://stackblitz.com/edit/iggrid-working-beta-3. The issue might be connected with some of these changes:

[zdrawku]

@tiliev once we merge this change and tag a new version, we will be able to test the change with StackBlitz.

Using of map, empty-map, list, null with map-get and map-has-get - Example

[luiscla27]

Hello, this issue also occurs at DatePicker demos (example):

https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html

[tiliev]

@luiscla27, the fix will affect all of the samples with similar error, including the date picker's samples.

[luiscla27]

Thank you @tiliev !

[tiliev]

@zdrawku @simeonoff
After the release of the Beta 6 the issue persists. After further research I see the package used by StackBlitz to run Sass in the browser is Sass.js. The next step would be to compile our Sass with Sass.js, hopefully we can reproduce the error. Please keep in mind we use node-sass for compiling to CSS in igniteui-angular-samples. In the Sass.js docs we can see:

Sass.js and node-sass should generate the same results.

But apparently they have some differences when compiling.

Workaround to open samples in prod in StackBlitz

Downgrade igniteui-angular version to 6.2.0-beta.3.

Another workaround to open samples with the LATEST version in prod in StackBlitz

Open the documentation in IE 11, after that hit "View in StackBlitz". Use the URL to play in any browser.

[tiliev]

After further investigation it turned out Stackblitz uses Sass.js version 0.10.6. This parser uses Sass version 3.4.5. In our code we use first-class functions (more info here) which are supported from Sass version 3.5. We should introduce a fallback.

[tiliev]

I logged an issue in Stackblitz related to the older Sass.js version - https://github.com/stackblitz/core/issues/757