Optimize Angular Apps with Unused Standalone Imports Diagnostic in v19

One of the most anticipated features since the introduction of standalone components is the ability to detect whether a component or directive imported into a component is actually being used. In Angular v19, this need has finally been addressed with the addition of a diagnostic for unused standalone imports.

The unused import diagnostic is reported as a warning, giving developers a heads-up without blocking the build. This can be especially helpful during development, allowing teams to catch unused imports early in the process. If needed, the diagnostic behavior can be disabled using the following option in the tsconfig.json file:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "unusedStandaloneImports": "suppress"
      }
    }
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [BarDirective, FooComponent],
  template: ``,
})
export class AppComponent {}

Follow me on Medium or Twitter to read more about Angular and JS!