Ag-param() called before ag-register-params

Question

I try to generate a custom theme for Ag-Grid with the new theme mixin. But I always get the following error:

ERROR in ./src/app/style.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--15-3!./src/app/style.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
              ^
      Ag-param() called before ag-register-params
      in C:\Development\WebApp\node_modules\@ag-grid-enterprise\all-modules\dist\styles\mixins\_ag-theme-params.scss (line 191, column 16)

Styles:

@import "../../../../node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-grid.scss";
@import "../../../../node_modules/@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material/sass/ag-theme-material-mixin";

.ag-theme-custom-test {
  @include ag-theme-material();
}

Answer 1

I have found the solution for my problem. The generation of the theme must be done on load of the app. I had outsourced my Ag-Grid theming into another file which will be imported.

---

Old outsourced theming file:

@import '~@ag-grid-enterprise/all-modules/dist/styles/ag-grid.scss';
@import '~@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material/sass/_ag-theme-material-mixin.scss';

.ag-theme-material{
    @include ag-theme-material(
        (
            background-color: green
        )
    );
}

Old styles.scss(which is initially loaded -> see angular.json config)

.dark-theme {
  @import './outsourced-ag-grid-theme.scss'  // not working

  REST OF THE OTHER THEMING STUFF....
}

---

New outsourced theming file:

@import '~@ag-grid-enterprise/all-modules/dist/styles/ag-grid.scss';
@import '~@ag-grid-enterprise/all-modules/dist/styles/ag-theme-material/sass/_ag-theme-material-mixin.scss';

.dark-theme .ag-theme-material{
    @include ag-theme-material(
        (
            background-color: green
        )
    );
}

New styles.scss(which is initially loaded -> see angular.json config)

.dark-theme {
  REST OF THE OTHER THEMING STUFF....
}

@import './outsourced-ag-grid-theme.scss'  // place it outside and it will be initially load

---

I hope I could help other devs out there. If you have questions, just let me know.