Angular 19: Fixing "imports is only valid on a standalone component"

After updating from Angular 18 to Angular 19, you might encounter the error 'imports' is only valid on a component that is standalone even after removing standalone: true from your components. This typically indicates a discrepancy between your Angular version and tooling.

Problem Overview

Angular 19's tooling changes can cause false-positive errors when:

• Extensions/Language Services aren't fully updated
• Cached build files retain old configuration
• Multiple Angular versions exist in your workspace

Symptoms

• Errors on imports property in @Component decorators
• Correctly migrated components flagging false errors
• Occurs in VS Code even after successful migration

---

Recommended Solutions

Solution 1: Restart and Update Tooling

Recommended First Step

Most cases resolve with these basic actions:

1. Update VS Code Extensions
   Update the "Angular Language Service" extension to its latest version
2. Restart VS Code
   Restart your editor to ensure tool reloads
3. Verify Angular CLI Versions
   Confirm consistent versions globally and locally:

   ng version

Solution 2: Clear Angular Cache

Corrupted build caches often cause this error:

1. Delete .angular/cache directory in your project root:

rm -rf .angular/cache

2. Restart VS Code and rebuild project

Solution 3: Enforce Consistent Workspace

For workspaces with mixed Angular versions:

1. Migrate all projects to Angular 19:

   ng update @angular/core@19 @angular/cli@19

2. Verify package.json versions match:

{
  "dependencies": {
    "@angular/core": "^19.0.0",
    "@angular/common": "^19.0.0"
  },
  "devDependencies": {
    "@angular/language-service": "^19.0.0",
    "@types/node": "^20.0.0"
  }
}

Solution 4: Reinstall Language Service

If problems persist, manually reinstall the language service:

npm uninstall @angular/language-service
npm install @angular/language-service@latest

---

Why This Happens

Angular 19's streamlined standalone component model requires:

• Language Service v19+ to recognize new metadata format
• Complete project cleanup after migration
• Consistent toolchain across workspace

Avoid Manual Hacks

Don't modify language-service internals to force isStandalone = true:

• Temporary fix only
• Breaks type checking and template validation
• Violates standard practices

---

Verification Steps

Confirm successful resolution:

1. Error disappears in VS Code
2. ng build completes without component warnings
3. Run the app to confirm functionality:

ng serve

Ensure your tsconfig.json contains angular compiler options:

{
  "compilerOptions": {
    "baseUrl": "./",
    ...
  },
  "angularCompilerOptions": {
    "strictTemplates": true
  }
}

---

Best Practices for Upgrading

1. Always update with the official migration guide:
   Angular Update Guide v18 → v19
2. Run migrations in clean Git state
3. Update all Angular-related packages simultaneously:

ng update @angular/core @angular/cli --force

By following these solutions, you'll resolve the false imports validation errors and maintain a stable Angular 19 development environment.