Angular Suffix Schematics

📋 Changelog • 🤝 Contributing • 🐛 Report Issues

Angular CLI schematics that automatically add proper suffixes (.component, .service, .pipe, etc.) to file names and class names in Angular 20+

🚀 Why?

Starting with Angular 20, the CLI changed its default behavior and no longer adds suffixes like .component, .service, etc., to file names and class names. This can make codebases harder to navigate and less consistent.

This package restores the classic Angular naming conventions by wrapping the official Angular schematics.

Before (Angular 20 default)

ng g c my-component
# Creates: my-component/my-component.ts
# Class: MyComponent

After (with this package)

ng g c my-component
# Creates: my-component/my-component.component.ts
# Class: MyComponentComponent

📦 Installation

ng add @turpinjonathan/ng-suffix-schematics

That's it! 🎉 The command will install the package and automatically configure your angular.json.

🔧 Manual Installation (not recommended)

1. Install the package

npm install --save-dev @turpinjonathan/ng-suffix-schematics
# or
yarn add --dev @turpinjonathan/ng-suffix-schematics

2. Configure angular.json

Add the schematic collection to your angular.json:

{
  "cli": {
    "schematicCollections": [
      "@turpinjonathan/ng-suffix-schematics",
      "@schematics/angular"
    ]
  }
}

3. Configure options (optional)

Add configuration for each schematic in your project's schematics section:

{
  "projects": {
    "your-project": {
      "schematics": {
        "@turpinjonathan/ng-suffix-schematics:component": {
          "style": "scss",
          "standalone": true,
          "prefix": "app",
          "changeDetection": "OnPush"
        },
        "@turpinjonathan/ng-suffix-schematics:service": {
          "flat": false
        }
      }
    }
  }
}

🎯 Usage

Use Angular CLI commands as usual:

ng g c my-component      # Component
ng g s my-service        # Service
ng g d my-directive      # Directive
ng g p my-pipe           # Pipe
ng g g my-guard          # Guard
ng g interceptor my-int  # Interceptor
ng g r my-resolver       # Resolver

All standard Angular CLI options work: --flat, --skip-tests, --standalone, etc.

⚙️ Configuration

This package respects your angular.json configuration. You can define defaults at workspace or project level:

{
  "schematics": {
    "@turpinjonathan/ng-suffix-schematics:component": {
      "style": "scss",
      "standalone": true,
      "changeDetection": "OnPush"
    },
    "@schematics/angular:service": {
      "flat": false
    },
    "component": {
      "skipTests": true
    }
  },
  "projects": {
    "my-app": {
      "prefix": "app",
      "schematics": {
        "@turpinjonathan/ng-suffix-schematics:component": {
          "style": "less"
        }
      }
    }
  }
}

Supported key formats:

• component - Short format
• @schematics/angular:component - Angular CLI format
• @turpinjonathan/ng-suffix-schematics:component - Full package format

Priority order: Workspace defaults < Project defaults < Command-line options

🔧 Supported Options

Component Options

• --prefix - Selector prefix (e.g., app)
• --style - Style file extension (css, scss, sass, less)
• --skip-tests - Skip creating .spec.ts files
• --inline-style - Include styles inline in the component
• --inline-template - Include template inline in the component
• --standalone - Create a standalone component
• --change-detection - Change detection strategy (Default or OnPush)
• --flat - Create files at the top level instead of in a folder

Service Options

• --flat - Create at the top level
• --skip-tests - Skip creating .spec.ts files

Directive/Pipe Options

• --prefix - Directive/Pipe selector prefix
• --flat - Create at the top level
• --skip-tests - Skip creating .spec.ts files
• --standalone - Create a standalone directive/pipe

Guard/Interceptor/Resolver Options

• --flat - Create at the top level
• --skip-tests - Skip creating .spec.ts files

Example with options:

ng g c my-component --flat --skip-tests --standalone
ng g c admin/dashboard --change-detection=OnPush --inline-template
ng g s api/auth --skip-tests
ng g p currency --standalone

✨ Features

• ✅ Components: Generates name.component.ts with export class NameComponent
• ✅ Services: Generates name.service.ts with export class NameService
• ✅ Directives: Generates name.directive.ts with export class NameDirective
• ✅ Pipes: Generates name.pipe.ts with export class NamePipe
• ✅ Guards: Generates name.guard.ts with functional guard (Angular 20+)
• ✅ Interceptors: Generates name.interceptor.ts with functional interceptor (Angular 20+)
• ✅ Resolvers: Generates name.resolver.ts with functional resolver (Angular 20+)
• ✅ Workspace defaults integration: Respects angular.json configuration
• ✅ Works with nested paths: ng g c features/admin/dashboard
• ✅ Compatible with Angular 20+
• ✅ 102 comprehensive tests: Unit and integration testing

📝 Example Angular.json Configuration

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "schematicCollections": [
      "@turpinjonathan/ng-suffix-schematics",
      "@schematics/angular"
    ]
  },
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {
        "@turpinjonathan/ng-suffix-schematics:component": {
          "style": "scss",
          "standalone": true,
          "prefix": "app",
          "flat": false,
          "skipTests": false,
          "inlineStyle": false,
          "inlineTemplate": false,
          "changeDetection": "OnPush"
        },
        "@turpinjonathan/ng-suffix-schematics:directive": {
          "standalone": true,
          "prefix": "app",
          "flat": false,
          "skipTests": false
        },
        "@turpinjonathan/ng-suffix-schematics:pipe": {
          "standalone": true,
          "flat": false,
          "skipTests": false
        },
        "@turpinjonathan/ng-suffix-schematics:service": {
          "flat": false,
          "skipTests": false
        },
        "@turpinjonathan/ng-suffix-schematics:guard": {
          "flat": false,
          "skipTests": false
        },
        "@turpinjonathan/ng-suffix-schematics:interceptor": {
          "flat": false,
          "skipTests": false
        },
        "@turpinjonathan/ng-suffix-schematics:resolver": {
          "flat": false,
          "skipTests": false
        }
      }
    }
  }
}

🧪 Testing

99 comprehensive tests ensure reliability across all schematics:

• 28 tests - Utilities (path manipulation & tree transformations)
• 11 tests - ng-add schematic (automatic configuration)
• 60 tests - All schematics (component, service, pipe, directive, guard, interceptor, resolver)

Test coverage includes:

• ✅ File generation with correct suffixes
• ✅ Class/function naming conventions
• ✅ Nested paths and special characters
• ✅ All CLI options (flat, skipTests, standalone, etc.)
• ✅ Edge cases (duplicate suffixes, type enforcement)

All tests run automatically on every push via GitHub Actions CI/CD with Node.js 18.x, 20.x, and 22.x.

📊 Compatibility

| Package Version | Angular Version | Status | |----------------|-----------------|--------| | 1.x.x | 20.x | ✅ Supported |

Note: This package follows Angular's versioning. Each major version is compatible with the corresponding Angular major version.

🤝 Contributing

Contributions are welcome! Please read our Contributing Guidelines for more details.

📄 License

MIT © Jonathan TURPIN

🐛 Issues

Found a bug or have a suggestion? Open an issue

⭐ Show Your Support

Give a ⭐️ if this project helped you!