After add @ngrx/schematics to ng6 project, cli generate component with css instead of scss

[kklimczak]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

When we add schematics from ngrx and change default schematics collection, cli stop generate components with scss files.
When we revert the default collection, cli start again generate components with scss files.

Of course, we set

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

in angular.json file, also set with @ngrx/schematics/angular:component.

Expected behavior:

When we use ngrx schematics as a default collection, cli should still generate scss, when it set.

Minimal reproduction of the problem with instructions:

1. Generate project with @angular/cli@6.0.0
2. Follow this instruction to install ngrx with schematics and set it as default schematics collection.
3. Set SCSS as default css preprocessor in angular.json file using schematics:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

Optional try with @ngrx/schematics/angular:component instead of @schematics/angular:component
4. Generate component via CLI.

Version of affected browser(s),operating system(s), npm, node and ngrx:

node: 8.11.1
npm: 6.0.0
dependencies:

  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^5.2.0",
    "@ngrx/entity": "^5.2.0",
    "@ngrx/store": "^5.2.0",
    "@ngrx/store-devtools": "^5.2.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular-devkit/schematics": "^0.6.0",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@ngrx/schematics": "^5.2.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }

Other information:

angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ls-admin-web": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ls-admin-web",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ls-admin-web:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ls-admin-web:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ls-admin-web:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.scss"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "ls-admin-web-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "ls-admin-web:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "ls-admin-web",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  }
}

[timdeschryver]

Fyi, in the meantime I believe you can pass the styleext via de cli via --styleext scss.

[kklimczak]

Yeah, of cource, we know this solution but it's a workaround. Before we don't additional param for this.
I know it is a small thing but very helpful.

[timdeschryver]

Yea you're right, just said it in case someone has the same problem and doesn't know it is possible to pass it as an argument.

[brandonroberts]

This seems like an Angular CLI issue, since we're just extending those schematics. And you should verify this issue against the latest NgRx betas.

[alexanderwende]

I can verify the reported behavior with latest @ngrx/schematics. Still generates css files instead of scss, even though styleext is set to scss.

package.json with used versions:

{
  "name": "ng6-ngrx",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ngrx/effects": "^6.0.0-beta.2",
    "@ngrx/entity": "^6.0.0-beta.2",
    "@ngrx/router-store": "^6.0.0-beta.2",
    "@ngrx/store": "^6.0.0-beta.2",
    "@ngrx/store-devtools": "^6.0.0-beta.2",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "~6.0.1",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@ngrx/schematics": "^6.0.0-beta.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

But thanks for posting the workaround! :)

[brandonroberts]

If you set the default styleext for @ngrx/schematics:component does it work?

[timdeschryver]

@brandonroberts when putting the configurations inside @ngrx/schematics:component it does work.

[kklimczak]

Could you mention this information in the schematics documentation?

[brandonroberts]

I'm going to verify with the CLI team that its supposed to work that way. If so, then yes we'll update the docs.

[brandonroberts]

The CLI team confirmed that you should set the defaults for @ngrx/schematics:component in your angular.json. @kklimczak would you like to put in a PR for this?