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

Created on 9 May 2018 · 14Comments · Source: ngrx/platform

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:

Generate project with @angular/[email protected]
Follow this instruction to install ngrx with schematics and set it as default schematics collection.
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

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"
  }
}

Accepting PRs Docs Schematics

Source

kklimczak

👍5

Most helpful comment

I can't get this to work... Any news on this?

Am I doing it wrong in angular.json?

{
...
 "defaultProject": "xxx-xxx",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  },
  "schematics": {
    "@ngrx/schematics/angular:component": {
      "styleext": "scss"
    },
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

olefrank on 31 Jan 2019

👍2

All 14 comments

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

timdeschryver on 9 May 2018

👍2

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.

kklimczak on 9 May 2018

👍1

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.

timdeschryver on 9 May 2018

👍1

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.

brandonroberts on 9 May 2018

👍1

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! :)

alexanderwende on 12 May 2018

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

brandonroberts on 12 May 2018

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

timdeschryver on 12 May 2018

👍1

Could you mention this information in the schematics documentation?

kklimczak on 14 May 2018

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 on 15 May 2018

🎉2

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?

brandonroberts on 16 May 2018

I created PR for this.

kklimczak on 16 May 2018

👍1

I just noticed a similar bug. After following the same instructions above, it works for generating components, but not for containers. In other words:

ng g container <name> generates a .css file
ng g component <name> generates a .scss file
ng g container <name> --styleext scss generates a .scss file

davidtlee on 4 Aug 2018

I can't get this to work... Any news on this?

Am I doing it wrong in angular.json?

{
...
 "defaultProject": "xxx-xxx",
  "cli": {
    "defaultCollection": "@ngrx/schematics"
  },
  "schematics": {
    "@ngrx/schematics/angular:component": {
      "styleext": "scss"
    },
    "@schematics/angular:component": {
      "styleext": "scss"
    }
}

olefrank on 31 Jan 2019

👍2

This is still not working with Angular 9 and ngrx 9.

"schematics": {
        "@ngrx/schematics:component": {
          "style": "scss"
        }
},

Anything changed?
This works though:

"schematics": {
        "@ngrx/schematics:component": {
          "style": "scss"
        },
        "@schematics/angular:component": {
          "style": "scss"
        }
},