라떼군 이야기
VS Code Angular 프로젝트에서 'Property ɵunwrapWritableSignal does not exist' 에러 해결하기
Problem
Angular 프로젝트 개발 중 ng serve를 통한 빌드와 실행은 성공적으로 이루어지지만, VS Code 편집기 화면 내에서만 지속적으로 에러가 표시되는 현상입니다. 특히 템플릿 파일(.html)의 [(ngModel)] 양방향 바인딩 구문에서 빨간 밑줄이 그어지며 다음과 같은 에러 메시지가 나타납니다.
Property ‘ɵunwrapWritableSignal’ does not exist on type ’typeof import("…/@angular/core/index")’.
코드를 수정하지 않았음에도 갑자기 발생하는 경우가 많아 개발자에게 혼란을 줍니다.
Background
이 문제는 코드 자체의 논리적 오류가 아니라, VS Code의 확장 프로그램인 Angular Language Service의 버전 호환성 문제입니다.
Angular Language Service는 템플릿 내에서 자동 완성, 타입 체크, 오류 감지 기능을 제공합니다. 최근 Angular 팀이 ‘Signal’이라는 새로운 반응형 기초 요소를 도입하면서, 확장 프로그램이 이를 지원하기 위해 업데이트되었습니다. 이 과정에서 ɵunwrapWritableSignal과 같은 내부(Private) API를 참조하게 되었는데, 특정 버전(v17.2.0 등)의 확장 프로그램이 구버전 Angular 프로젝트(v14, v15 등)나 특정 환경에서 해당 속성을 찾지 못해 오작동을 일으키는 버그입니다. 참고로 ɵ 기호는 Angular 프레임워크의 내부 전용 API임을 나타냅니다.
Solution
이 문제는 주로 확장 프로그램의 버그이므로, 확장 프로그램을 이전 버전으로 되돌리거나 최신 수정 버전으로 업데이트하여 해결할 수 있습니다.
방법 1: Angular Language Service 버전 롤백 (가장 확실한 임시 방편)
문제가 발생한 최신 버전을 피하고, 안정적인 이전 버전(v17.1.1 등)으로 되돌리는 방법입니다.
- VS Code 좌측 사이드바에서 Extensions(확장) 아이콘을 클릭합니다.
- 검색창에
Angular Language Service를 입력하여 해당 확장을 찾습니다. - 확장 프로그램 이름 옆의 톱니바퀴(관리) 아이콘을 클릭하거나, 상세 페이지에서 Uninstall 버튼 옆의 화살표를 누릅니다.
- Install Specific Version…(특정 버전 설치) 메뉴를 선택합니다.
- 목록에서
17.1.1버전을 선택하여 설치합니다. - VS Code를 재시작(Reload)합니다.
방법 2: 확장 프로그램 최신 버전 업데이트
Angular 팀은 해당 버그를 인지하고 이후 버전(v17.2.2 이상)에서 수정을 완료했습니다. 만약 구버전을 사용 중이라면 최신 버전으로 업데이트하는 것만으로 해결될 수 있습니다.
- Extensions 탭에서
Angular Language Service를 확인합니다. - 업데이트 버튼이 활성화되어 있다면 클릭하여 최신 버전으로 업데이트합니다.
- 만약 업데이트 후에도 해결되지 않는다면 방법 1을 시도하세요.
방법 3: FormsModule 임포트 확인 (기본 점검)
확장 프로그램 문제가 아니라면, 실제로 ngModel을 사용하기 위한 모듈이 누락되었을 수 있습니다. app.module.ts 또는 해당 컴포넌트가 Standalone인 경우 imports 배열을 확인하세요.
// app.module.ts 또는 feature.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // FormsModule 임포트 필수
@NgModule({
declarations: [
// ...
],
imports: [
FormsModule, // imports 배열에 추가
// ...
],
providers: [],
bootstrap: []
})
export class AppModule { }
Standalone 컴포넌트의 경우:
// user.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-user',
standalone: true,
imports: [FormsModule], // 여기에도 추가되어야 함
template: `
<input [(ngModel)]="username" />
`
})
export class UserComponent {
username = '';
}
Deep Dive
컴파일 오류 vs IDE 오류
이 문제는 **빌드 타임(Build Time)**과 **편집 타임(Editor Time)**의 차이를 명확히 보여줍니다. Angular CLI(ng serve)는 프로젝트의 package.json에 설치된 로컬 Angular 컴파일러를 사용하여 빌드하므로 문제가 없었습니다. 반면, VS Code는 별도로 설치된 ‘Angular Language Service’ 확장 프로그램을 사용하여 코드를 분석합니다. 이 두 도구의 버전이나 내부 로직이 일치하지 않을 때, 실제 코드는 정상이지만 에디터에서는 빨간 줄이 뜨는 현상이 발생합니다.
ɵ (Theta) 기호의 의미
에러 메시지에 포함된 ɵ는 Angular 내부에서만 사용하기 위해 예약된 식별자 접두사입니다. 이는 공개 API(Public API)가 아니므로, 애플리케이션 코드에서 직접 ɵ로 시작하는 함수나 프로퍼티를 사용하는 것은 권장되지 않습니다. 이번 에러는 확장 프로그램이 이 내부 API에 의존성을 가지면서 발생한 사이드 이펙트였습니다.
Conclusion
‘Property ɵunwrapWritableSignal does not exist’ 에러는 내 코드의 잘못이 아닌, VS Code 확장 프로그램의 일시적인 버그일 가능성이 매우 높습니다. 프로젝트가 정상적으로 실행된다면 당황하지 말고 Angular Language Service 확장의 버전을 17.1.1로 낮추거나 최신 버전으로 업데이트하여 문제를 해결하시기 바랍니다.