"Can't bind to 'ngbNavItem' since it isn't a known property of 'li'" VS Code?

user_2161570 0
Viewed 763

The scenario:

We have a production Angular app that uses many libraries, including: ng-select, angular-fontawesome, ng2-charts, ngx-quill, ng-bootstrap and so on... nothing out of the orginary.

For some reason, ng-bootstrap in particular(and a few other smaller libraries) are giving an issue in VS Code: Every single component / directive from the library shows an error that it can't be found:

Example of using ngbNav:

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
</ul>

The issue:

VS Code shows red with errors that it's basically not valid:

Can't bind to 'activeId' since it isn't a known property of 'ul'

and:

There is no directive with "exportAs" set to "ngbNav"

enter image description here

And yes, NgbModule is imported in app.module.ts

  imports: [
    CommonModule,
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    RouterModule,
    BrowserAnimationsModule,
    NgbModule,
    ...
  ]

One thing that's maybe (somewhat) non-standard is that we have heavy use of lazy-loaded modules within our application.

However, in those "sub" modules that use these components, we have NgbModule imported as well, in the <module-name>.module.ts files.

The strangeness:

The App itself works fine: Local development has no compilation errors, all of the ng-bootstrap components work flawlessly, Lint and Unit tests run fine, the App builds successfully and no issues in production.

This leads me to think that it may be a VS Code eslint or angular language service issue but I've tried re-installing every possibly related extension with no joy.

The question:

Does anyone know what would cause this and how to remedy? It's not a showstopper but having the editor be valid helps with debugging and exploring usage of the libraries.

ng-bootstrap angular visual-studio-code typescript
2 Answers

In the component class, try adding this property: active = 1;

user_107652710

I found what was causing this in my case. There was an old component in the project that was no longer being used and had been removed from the declarations: [] section in app.module.ts.

VSCode reports errors for it, even though it is no longer being compiled into the application. Add the declaration back into app.module.ts and the "errors" disappear. Take it out and they come back again.

In my case I could just delete the component completely as it was not needed. This only showed up recently after an upgrade of Angular version.

user_40493060
Related