Igniteui-angular: Sass can't get compiled after updating Angular 8.

[tkiryu]

Description

Sass can't get compiled after updating Angular 8.

• igniteui-angular version: 8.0.0-beta.1
• browser: N/A

Steps to reproduce

1. Run the attached sample.

Result

An error occurs.

C:\Users\tatsushi\Documents\repo\igx-grid-sample>ng s

Date: 2019-06-14T11:19:35.650Z
Hash: 61e6945be04848152e44
Time: 23773ms
chunk {main} main.js, main.js.map (main) 16.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 363 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 17.2 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.24 MB [initial] [rendered]

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                                       ^
      Expected '.
    ╷
114 │         '#{map-get(_l1-shadows($l1-color), $elevation)},
    │                                                         ^
    ╵
  node_modules\igniteui-angular\lib\core\styles\base\elevations\_index.scss 114:57  root stylesheet
  node_modules\igniteui-angular\lib\core\styles\base\_index.scss 5:9                @import
  node_modules\igniteui-angular\lib\core\styles\themes\_utilities.scss 1:9          @import
  node_modules\igniteui-angular\lib\core\styles\themes\_core.scss 10:9              @import
  node_modules\igniteui-angular\lib\core\styles\themes\_index.scss 7:9              @import
  stdin 5:9                                                                         root stylesheet
      in C:\Users\tatsushi\Documents\repo\igx-grid-sample\node_modules\igniteui-angular\lib\core\styles\base\elevations\_index.scss (line 114, column 57)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

I think this is the cause.

https://github.com/angular/angular-cli/issues/14497#issuecomment-494716297

in version 8, we moved away from node-sass in favor of sass and it has some differences.

Expected result

No error occurs.

Attachments

igx-grid-sample.zip

[tkiryu]

Here is a workaround.

npm i node-sass -D

[kdinev]

You need to remove your nose modules and your package lock and then install to refresh dependencies on any depth.

[kdinev]

@tkiryu We will post a new section in our update guide with the official 8.0.0: https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update_guide.html

Linking the issue: https://github.com/IgniteUI/igniteui-docfx/issues/1297

[tkiryu]

@kdinev , thank you for your suggestion.

As you said, I tried

1. remove node_modules
2. remove package.lock.json
3. npm install
4. ng serve

But it didn't work. I got the same error again. I'm not sure what's wrong.
If I comment out the following lines from styles.scss, compilation succeeds.

// @import "~igniteui-angular/lib/core/styles/themes/index";
// @include igx-core();
// @include igx-theme($default-palette);

Were you able to run my attached sample?

[tkiryu]

I tried using sass to compile sass files. The followings are what I did.

I cloned igniteui-angular repo and installed sass.

git clone https://github.com/IgniteUI/igniteui-angular.git
cd igniteui-angular
npm i sass -D

Then I edited gulpfile.js to use sass as a compiler.

// before
const sass = require('gulp-sass');

// after
const sass = require('gulp-sass');
sass.compiler = require('sass');

Then I executed build:style task. I got the same error.

$> npm run build:style

> [email protected] build:style C:\Users\tatsushi\Downloads\igniteui-angular-fix-toolbar-density
> gulp build-style

[19:45:28] Using gulpfile ~\Downloads\igniteui-angular-fix-toolbar-density\gulpfile.js
[19:45:28] Starting 'build-style'...
Error in plugin "sass"
Message:
    projects\igniteui-angular\src\lib\core\styles\base\elevations\_index.scss
Error: Expected '.
    ╷
114 │         '#{map-get(_l1-shadows($l1-color), $elevation)},
    │                                                         ^
    ╵
  projects\igniteui-angular\src\lib\core\styles\base\elevations\_index.scss 114:57        root stylesheet
  projects\igniteui-angular\src\lib\core\styles\base\_index.scss 5:9                      @import
  projects\igniteui-angular\src\lib\core\styles\themes\_utilities.scss 1:9                @import
  projects\igniteui-angular\src\lib\core\styles\themes\_core.scss 10:9                    @import
  projects\igniteui-angular\src\lib\core\styles\themes\_index.scss 7:9                    @import
  projects\igniteui-angular\src\lib\core\styles\themes\presets\igniteui-angular.scss 1:9  root stylesheet

It doesn't seem that igniteui-angular sass files can get compiled by sass. Do you have any thoughts on this?

[simeonoff]

@tkiryu I can't reproduce your issues. As @kdinev said, you just need to completely delete your node_modules folder and do npm install anew. You don't have to edit the gulpfile nor do you have to attempt to manually compile the styles.

I have just done that for myself and the colleagues here, and it works for all of them.

[tkiryu]

@simeonoff , thanks for trying to reproduce.

As @kdinev said, you just need to completely delete your node_modules folder and do npm install anew.

I already have tried this and can't get it to work. Hmm, something might have gone wrong with my environment...

If you have any samples that you or your colleagues created, could you share it with me, please? I'd like to try it on my environment.

[brookhutchinson]

When I try to update my Angular Project is using @angular/[email protected] that uses Ignite UI for Angular I get the same issue as reported by tkiryu. My Angular Project is using [email protected]

[brookhutchinson]

I have tried to delete my package-lock.json, delete my node_modules folder, and then perform an npm install. Same issue. Any other suggestions?

[brookhutchinson]

What version of igniteui-angular npm package is compatible with @angular/[email protected] ?

[mpavlinov]

@brookhutchinson We haven't released yet "[email protected]" which will be compatible @angular/[email protected]. For now you can use the beta: https://www.npmjs.com/package/igniteui-angular/v/8.0.0-beta.1

[brookhutchinson]

Thank you for your message. When will [email protected] be released?

[brookhutchinson]

Get same issues when I update to npm package [email protected]
When I try and run "ng serve" the app is not able to compile sass. Not able to run project in browser.

[mpavlinov]

@brookhutchinson We're fixing some issues that we found, so cannot commit to a deadline. Would like to release it in the next few days.

[brookhutchinson]

Thank you for the update

[damyanpetev]

Reposting from another issue:

It must be some other dependency on node-sass in the app and the fresh install made it (or the loader) resurface as top-level. sass-loader will pick node by default over the dart version if both are found.

However, in a fresh project nothing in the Angular build packages depends on node-sass after updating to 8 and thus the re-install does nothing.

So @tkiryu's first suggestion is the option currently.

[kdinev]

With Beta 2 node-sass is no longer required! Thanks @simeonoff

[tkiryu]

@kdinev , @simeonoff , great thanks! Now I'm enjoying Angular v8 world!