Issue
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.
Solution
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 By - Noob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.