Angular standalone component OnPush change detection strategy issue?

Question

I created a standalone component that looks like this:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { ModeToggleService } from './mode-toggle.service';
import { ThemeMode } from './models';
import { ChangeDetectionStrategy } from '@angular/compiler';

@Component({
  selector: 'app-nav-bar',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NavBarComponent {
  constructor(private modeService: ModeToggleService) {}

  mode$ = this.modeService.mode$;

  onThemeToggle(mode: ThemeMode) {
    this.modeService.toggleMode(mode);
  }
}

Everything worked fine until I added changeDetection: ChangeDetectionStrategy.OnPush . Now, when I hover over the ChangeDetectionStrategy.OnPush underlined error in VSCode , I see this note:

changeDetection must be a member of ChangeDetectionStrategy enum from @angular/core Value is of type 'ChangeDetectionStrategy'.(-991010)

I can't figure out what is going wrong, and I'd appreciate some help.

Noob · Accepted Answer · 2023-11-09 20:49:20Z

8

Ok, so the issue was that ChangeDetectionStrategy should be imported from @angular/core, and not from @angular/compiler, as it was automatically imported by VSCode for some reason.

Hopefully, this answer saves some debugging time for someone else.

answered Nov 9, 2023 at 20:49

Noob

2,8454 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular standalone component OnPush change detection strategy issue?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related