Using [(ngModel)] in standalone component causes error display while the app works

[dominik-werner-casra]

🐞 bug report

Description

When using Angular 17 and writing a standalone component, the usage of [(ngModel)] is wrongly marked as an error in the editor while the app works as expected:

error:

Property 'ɵunwrapWritableSignal' does not exist on type 'typeof import("/my-repos/my-app/src/node_modules/@angular/core/index")'.ngtsc(2339)

my.component.ts:

@Component({
  selector: 'my-component,
  standalone: true,
  imports: [FormsModule],
  templateUrl: './my.component.html'
})
export class MyComponent {
  opacityModifier = 1;
}

my.component.html:

<div class="config-panel">
    <div>
        <button class="config-button">Button 1</button>
        <button class="config-button">Button 2</button>
        <button class="config-button">Button 3</button>
        <button class="config-button">Button 4</button>
    </div>
    <div>
        <label for="opacity-slider">Opacity</label>
        <input id="opacity-slider" [(ngModel)]="opacityModifier" type="range" step="0.01" min="0" max="1" />
    </div>
</div>

Bug Type

What does this bug affect

• [x] Angular Language Service VSCode extension
• [ ] Angular Language Service server

Reproduction

Steps to reproduce the behavior:

1. Create a standalone component
2. Add the FormsModule to the imports of the component
3. Define a property to bind to an input element in the HTML template
4. Add an input element to the HTML template
5. Use [(ngModel)] to bind the input to the property

Expected behavior

An error should only be shown if the HTML template is wrong. As long as the FormsModule is imported by a standalone component it should be possible to use [(ngModel)] without an error prompt.

Logs

[Info  - 9:14:52 AM] Angular language server process ID: 16388
[Info  - 9:14:52 AM] Imported typescript/lib/tsserverlibrary is version 5.3.2.
[Info  - 9:14:52 AM] Using @angular/language-service v17.2.1 from c:\Users\dwerner\.vscode\extensions\angular.ng-template-17.2.2\node_modules\@angular\language-service\index.js
[Info  - 9:14:52 AM] Log file: c:\Users\dwerner\AppData\Roaming\Code\logs\20240312T065350\window1\exthost\Angular.ng-template\nglangsvc.log
[Info  - 9:14:56 AM] Enabling language service for d:/my-repos/my-app/tsconfig.json.

🌍 Your Environment

Angular Version:

17.1.2

Angular CLI: 17.1.2
Node: 20.11.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1701.2
@angular-devkit/build-angular   17.1.2
@angular-devkit/core            17.1.2
@angular-devkit/schematics      17.1.2
@schematics/angular             17.1.2
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.3

Extension Version:

v17.2.1

VSCode Version:

1.86.1

Operating System:

Windows 10 Version 22H2 OS Build 19045.4046

Extension options:

"angular.forceStrictTemplates": true,
"angular.log": "verbose"

[atscott]

Duplicate of https://github.com/angular/vscode-ng-language-service/issues/2001

See https://github.com/angular/vscode-ng-language-service/issues/2001#issuecomment-1971905871 for potential workarounds

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}