I’m upgrading an Angular 8 application to Angular 17 and encountering issues with ngModel binding and PrimeNG components. My application uses a module-based structure with app.module.ts as the main module.

Issue 1: ngModel Binding

Error:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘textarea’.
Code:

<textarea class="form-control" [(ngModel)]="lotDataJsonText"></textarea>

I’ve imported FormsModule in my app.module.ts, but the error persists.

Issue 2: PrimeNG RadioButton

Error:
error NG8001: ‘p-radioButton’ is not a known element:

1. If ‘p-radioButton’ is an Angular component, then verify that it is part of this module.
2. If ‘p-radioButton’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.

Code:

<p-radioButton name="requestType" value="lotType" [(ngModel)]="requestType" [ngModelOptions]="{standalone: true}" inputId="requestType1"></p-radioButton>

Configuration

package.json

{
  "dependencies": {
    "@angular/animations": "^17.1.3",
    "@angular/common": "^17.1.3",
    "@angular/compiler": "^17.1.3",
    "@angular/core": "^17.1.3",
    "@angular/forms": "^17.1.3",
    "@angular/platform-browser": "^17.1.3",
    "@angular/platform-browser-dynamic": "^17.1.3",
    "@angular/router": "^17.1.3",
    "primeicons": "^7.0.0",
    "primeng": "^17.3.1",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "^0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.3",
    "@angular/cli": "^17.1.3",
    "@angular/compiler-cli": "^17.1.3",
    "@types/node": "^20.11.20",
    "typescript": "~5.2.2"
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { RadioButtonModule } from 'primeng/radiobutton';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ButtonModule,
    RadioButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I’ve tried updating package.json, re-importing modules, and cleaning/reinstalling node_modules, but the issues persist.
What am I missing or doing wrong? How can I resolve these binding and component issues after upgrading to Angular 17?