The current situation:
Our Angular app is in production and utilizes various libraries such as ng-select, angular-fontawesome, ng2-charts, ngx-quill, ng-bootstrap, and others. Everything seems normal with these libraries except for ng-bootstrap, which along with a few other smaller libraries, is causing an issue in VS Code. The problem lies in every component/directive from the library showing errors indicating that they cannot be found.
For example, when using ngbNav:
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
</ul>
The dilemma:
VS Code highlights these components with red errors suggesting that they are invalid:
Can't bind to 'activeId' since it isn't a known property of 'ul'and:
There is no directive with "exportAs" set to "ngbNav"https://i.sstatic.net/2UOpt.png
We have ensured that NgbModule is imported in app.module.ts
imports: [
CommonModule,
FormsModule,
BrowserModule,
AppRoutingModule,
HttpClientModule,
RouterModule,
BrowserAnimationsModule,
NgbModule,
...
]
One potential factor worth mentioning is our heavy use of lazy-loaded modules throughout the application.
In these "sub" modules where we utilize these components, NgbModule is also imported in the respective <module-name>.module.ts files.
The peculiar aspect:
Despite the error indications in VS Code, the actual functionality of the app remains intact. Local development proceeds without compilation errors, all ng-bootstrap components function correctly, linting and unit tests pass smoothly, the app builds successfully, and there are no issues in production.
This leads me to suspect that the problem might lie within VS Code's eslint or angular language service. I have attempted reinstalling related extensions but to no avail.
The query at hand:
Does anyone have insight into what could be causing this discrepancy and how it can be addressed? While not a critical issue, having the editor recognize the components accurately aids in debugging and exploring library functionalities.