3

Build was successful, but after the installation and update of Angular 15, it started throwing multiple error.

For example:

Error: src/app/shared/components/content/reports/sales/partywise-order/partywise-order.component.html:155:82 - error NG8002: Can't bind to 'rowData' since it isn't a known property of 'ag-grid-angular'.

  1. If 'ag-grid-angular' is an Angular component and it has 'rowData' input, then verify that it is part of this module.
  2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. <ag-grid-angular id="party-sizewise-report-grid" class="ag-theme-balham" [rowData]="rowData"

package.json:

"@angular/animations": "^15.2.10",
"@angular/cdk": "^15.2.9",
"@angular/cli": "^15.2.11",
"@angular/common": "^15.2.10",
"@angular/compiler": "^15.2.10",
"@angular/core": "^15.2.10",
"@angular/forms": "^15.2.10",
"@angular/platform-browser": "^15.2.10",
"@angular/platform-browser-dynamic": "^15.2.10",
"@angular/router": "^15.2.10",
"@fortawesome/fontawesome-free": "^5.15.4",
"ag-grid-angular": "^31.0.0",
"ag-grid-community": "^31.0.0",

I have imported the module in my reports module where component is declare

@NgModule({
  declarations: [
    PartywiseOrderComponent,
    ProductwiseOrderComponent,
    PartywisePendingReadyOrderComponent,
    StockSizewiseComponent,
    PackagingSlipsReportComponent,
    LabelStickerTemplatesComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AgGridModule,
    ReportsRoutingModule
  ],
  exports: [
    LabelStickerTemplatesComponent
  ]
})
export class ReportsModule { 
  constructor() {
  }
}

Similarly throwing other errors for other modules too like

ReactiveFormModule - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'

2
  • Tried setting "stricTemplates":False in tsconfig and error is gone. What does this say? Commented Nov 5 at 7:13
  • Issue resolved. ngx-barcode6 library which was having version conflict and that was indirectly throwing the error. May be because it was being used in this component. So if anyone, coming on this question, just make sure nothing else is breaking, because strict modes of angular can affect other areas too if 1 area is breaking. Commented Nov 5 at 9:13

2 Answers 2

0

UPDATE:

On deleting .angular, node_modules and package-lock.json, then doing a fresh install and start fixed the issue.


You need to add AgGridModule to the module, which has the PartywiseOrderComponent in it's declarations array.

Let's assume the component belongs to ModuleX.

@NgModule({
  declarations: [
    ...
    PartywiseOrderComponent,
    ...
  ],
  imports: [
    ...
    AgGridModule,
    ...
  ],
})
export class ModuleX {}
Sign up to request clarification or add additional context in comments.

4 Comments

Component is present in the reports module. Missed while copy pasting, edited the question. It worked fine previously, but strict rules of IVY is breaking this. I am not getting what exactly is being missed.
Try deleting the .angular folder and node_modules and package-lock.json and do a fresh install and start
Resolved. Thank you so much!
updated my answer
-1

teps to make application Proper Upgradation:-

this links for the ag-grid datatable integration:- add-ag-grid-to-your-project

You can check this how can we upgrade the application link:- update-guide-14-15

Angular feature-modules:- angular-feature-modules

Angular Reactive Forms Guide:- angular-reactive-forms

then you need to check whether all the dependencies are installed in the application or not

Demo Code:-

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';

// Your Components Add Step By Step....

@NgModule({
  declarations: [
    ProductwiseOrderComponent,
    StockSizewiseComponent,
    LabelStickerTemplatesComponent,
    PartywiseOrderComponent,
    ...
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AgGridModule,
    RoutingModule,
    ...
  ],
  exports: [
    LabelStickerTemplatesComponent
    ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, ...]
})
export class ReportsModule {
  constructor() { ... }
}

Note:-
You need to add AgGridModule to the module that has the PartywiseOrderComponent in its declarations array.

Assuming the component belongs to Module, this issue seems related to module imports and exports.

If you follow above steps, you should be able to resolve the error.

way 2:-
If above solution does not work then follow this
We need to check whether caching is there

npm uninstall -g @angular/cli

npm cache clean --force

npm install -g @angular/[email protected]

ng new angular15App (copy src folder along with necessary files like package.json and all...)

npm install --force

ng build

ng serve

This will solve the error

4 Comments

Still does not work. I tried setting "strictTemplates" as false in tsconfig and it worked.
can you please share, What error it returns?
Check I have updated the answer and added second approach might be helpful to you
Resolved. Thank you so much!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.