This rule raises an issue when a Component, Directive, or Pipe explicitly sets standalone: false in its decorator configuration.
Angular’s standalone feature simplifies application architecture by eliminating the need for NgModules in many scenarios. Standalone components, directives, and pipes can be used directly without being declared in an NgModule, making the codebase more modular and easier to maintain.
When you explicitly set standalone: false, you’re opting out of this modern approach and forcing the use of the older NgModule-based
architecture. This creates unnecessary complexity and goes against Angular’s current best practices.
Standalone architecture offers several benefits:
Using standalone: false unnecessarily increases application complexity and maintenance overhead. It forces developers to manage
NgModule declarations and imports, which can lead to circular dependencies and harder-to-debug issues. Additionally, it may result in larger bundle
sizes due to less effective tree-shaking.
Remove the standalone: false property to use the default standalone behavior, or explicitly set it to true.
@Component({
standalone: false, // Noncompliant
template: '<div>Hello</div>'
})
class MyComponent {}
@Component({
template: '<div>Hello</div>'
})
class MyComponent {}
// Or explicitly set to true
@Component({
standalone: true,
template: '<div>Hello</div>'
})
class MyComponent {}
For Directives, remove standalone: false to enable standalone architecture.
@Directive({
selector: '[myDirective]',
standalone: false // Noncompliant
})
class MyDirective {}
@Directive({
selector: '[myDirective]'
})
class MyDirective {}
For Pipes, remove standalone: false to use standalone architecture.
@Pipe({
name: 'myPipe',
standalone: false // Noncompliant
})
class MyPipe {}
@Pipe({
name: 'myPipe'
})
class MyPipe {}