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

kklimczak · 2018-05-09T10:05:13Z

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/cli@6.0.0
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
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"
  }
}

The text was updated successfully, but these errors were encountered:

timdeschryver · 2018-05-09T11:13:39Z

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

kklimczak · 2018-05-09T11:58:56Z

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 · 2018-05-09T12:00:08Z

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 · 2018-05-09T14:42:51Z

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 · 2018-05-11T23:44:18Z

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 · 2018-05-12T00:08:09Z

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

timdeschryver · 2018-05-12T06:57:54Z

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

kklimczak · 2018-05-14T10:49:16Z

Could you mention this information in the schematics documentation?

brandonroberts · 2018-05-15T13:18:58Z

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 · 2018-05-16T12:20:10Z

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?

kklimczak · 2018-05-16T14:43:03Z

I created PR for this.

davidtlee · 2018-08-04T19:01:49Z

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

olefrank · 2019-01-31T11:59:25Z

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

BlindDespair · 2020-04-30T09:45:11Z

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

Related to #1036

brandonroberts added bug Project: Schematics labels May 15, 2018

brandonroberts added Comp: Docs Accepting PRs and removed bug labels May 16, 2018

kklimczak added a commit to kklimczak/platform that referenced this issue May 16, 2018

docs(Schematics): add information about schematics settings (ngrx#1036)

3e4bd73

kklimczak mentioned this issue May 16, 2018

docs(Schematics): add information about schematics settings (#1036) #1074

Merged

brandonroberts closed this as completed in 59eabeb May 16, 2018

GulajavaMinistudio mentioned this issue May 17, 2018

Update upstream TypescriptID/platform#116

Merged

timdeschryver mentioned this issue May 1, 2020

fix(schematics): use Angular default properties when not defined #2507

Merged

3 tasks

brandonroberts pushed a commit that referenced this issue May 4, 2020

fix(schematics): use Angular default properties when not defined (#2507)

7cd0624

Related to #1036

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kklimczak commented May 9, 2018

timdeschryver commented May 9, 2018

kklimczak commented May 9, 2018

timdeschryver commented May 9, 2018 •

edited

brandonroberts commented May 9, 2018 •

edited

alexanderwende commented May 11, 2018

brandonroberts commented May 12, 2018

timdeschryver commented May 12, 2018

kklimczak commented May 14, 2018

brandonroberts commented May 15, 2018

brandonroberts commented May 16, 2018

kklimczak commented May 16, 2018

davidtlee commented Aug 4, 2018

olefrank commented Jan 31, 2019 •

edited

BlindDespair commented Apr 30, 2020 •

edited

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

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

Comments

kklimczak commented May 9, 2018

I'm submitting a...

What is the current behavior?

Expected behavior:

Minimal reproduction of the problem with instructions:

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

Other information:

timdeschryver commented May 9, 2018

kklimczak commented May 9, 2018

timdeschryver commented May 9, 2018 • edited

brandonroberts commented May 9, 2018 • edited

alexanderwende commented May 11, 2018

brandonroberts commented May 12, 2018

timdeschryver commented May 12, 2018

kklimczak commented May 14, 2018

brandonroberts commented May 15, 2018

brandonroberts commented May 16, 2018

kklimczak commented May 16, 2018

davidtlee commented Aug 4, 2018

olefrank commented Jan 31, 2019 • edited

BlindDespair commented Apr 30, 2020 • edited

timdeschryver commented May 9, 2018 •

edited

brandonroberts commented May 9, 2018 •

edited

olefrank commented Jan 31, 2019 •

edited

BlindDespair commented Apr 30, 2020 •

edited