Angular创建组件报错：Option 'styleExt' is not defined 求助

Hey there, let's get this component creation error sorted out for you. After looking at your angular.json and the details you shared, here's what's going wrong and how to fix it step by step:

1. Correct the Typo in Your angular.json #

The main issue here is a case-sensitive typo in your configuration. In modern Angular CLI versions, the correct config key is styleExt (camelCase, with an uppercase "E"), but your file uses styleext (all lowercase) in two places.

Update these two sections in your angular.json:

Project-Level Schematics #

Find the schematics block under your AngularDemo project and fix the key:

"schematics": {
  "@schematics/angular:component": {
    "styleExt": "scss" // Changed from "styleext" to "styleExt"
  }
},

Global Schematics #

Fix the same typo in the root-level schematics at the bottom of the file:

"schematics": {
  "@schematics/angular:component": {
    "styleExt": "scss" // Changed from "styleext" to "styleExt"
  }
}

2. Use the Deprecated ng set Replacement: ng config #

Since ng set is no longer supported, use the ng config command to safely set your default style extension (this avoids manual typos like the one above):

• Set for your current project:

  ng config projects.AngularDemo.schematics.@schematics/angular:component.styleExt scss
  

• Set globally (for all future Angular projects):

  ng config schematics.@schematics/angular:component.styleExt scss
  

3. Verify Your Angular CLI Version #

Outdated CLI versions might not recognize the styleExt key properly. Check your version with:

ng --version

If you're running an older version (pre-v8), upgrade it:

• Global upgrade:

  npm install -g @angular/cli
  

• Project-level upgrade:

  npm install @angular/cli --save-dev
  

4. Test Component Creation #

Once you've made these changes, test creating a component to confirm the error is gone:

ng generate component test-scss-component

You should see a .scss style file generated alongside your component files, with no error messages.

Optional: Align Your Global Styles File #

As a consistency check, you might want to rename your src/styles.css to src/styles.scss and update the reference in your angular.json's styles array:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss" // Updated from .css to .scss
],

内容的提问来源于stack exchange，提问作者Sandy Sanap