Skip SCSS and Test Files in Angular with ng generate

In Angular, when using ng generate (or ng g), files like test files (.spec.ts) and style files (like .scss) are generated by default. However, if you want to skip generating test files for all entities (e.g., components, services) and generate only one global SCSS file, here's how you can customize the Angular CLI behavior.

Steps to Skip Test Files and SCSS Files for Components

1. Skip Test Files (.spec.ts)

To skip generating test files for components, services, pipes, etc., configure this in your angular.json file under each schematic type.

Add This Configuration to angular.json:

{
  "projects": {
    "your-project-name": {
      "schematics": {
        "@schematics/angular:component": {
          "skipTests": true,
          "styleExt": "none"
        },
        "@schematics/angular:directive": {
          "skipTests": true,
          "styleExt": "none"
        },
        "@schematics/angular:service": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:resolver": {
          "skipTests": true
        }
      }
    }
  }
}

This configuration ensures that no .spec.ts files are generated when running ng generate commands for components, services, guards, and more.

2. Global SCSS File

Angular automatically generates a global styles.scss file when you create a new project, which is included in your build configuration. To make sure it is used for global styling, confirm it is properly linked in your angular.json:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "styles": [
            "src/styles.scss"
          ]
        }
      }
    }
  }
}

With this setup, you will only have one global styles.scss file for your project, and no additional .scss or .css files will be generated for individual components or other entities.

Example

Now, when you run:

ng generate component my-component

It will generate:

• my-component.component.ts

• my-component.component.html

• No .scss or .css file

• No .spec.ts test file

Conclusion

This configuration ensures that:

• No test files (.spec.ts) are generated for components, services, etc.

• No style files (CSS/SCSS) are generated for components, except for your global styles.scss file.

This is the cleanest setup to meet your needs—keeping only the global SCSS file while skipping unnecessary files for components, services, and other entities.