can't bind to 'ngbnavitem'?
It can be that your directive isn’t a “known property” of the component you’re using, or maybe it’s that the component itself says it’s not “a known element”.
This is usually caused because Angular is not able to find the component or the property you’re trying to use, meaning that, it might be there somewhere, but it’s not available to the module you’re working on.
To solve this, we must go into the module we’re working on, and add that property or the module responsible for that property to our module’s imports.
For example, let’s say you’re working on a module called HomeModule, and that module has a component that looks a bit like this:
Right now, your component’s template has one input field, if you try to bind that field to a class property using ngModel, you can do something like this:
The issue here is, if you try to run this code, you’ll get an error in the console saying something like this:
This means that our HomeComponent is trying to figure out what to do with the ngModel property, but it can’t find it, so it doesn’t know how to react.
When this happens, we need to let our component know where to get that ngModel from, for this, we’ll go to the component’s module, the one that is declaring this component, if we go there, it might look something like this:
Now, we want to add the module that has that ngModel property to our imports array:
And that’s it, once you refresh the app you’ll see that the error is gone and that your component is now able to access the ngModel declaration.
It’s the same for when you try to add a component, for example, let’s say that out HomeComponent wants to use the CoolComponent we have in the CoolModule, if we try to use it directly like this:
We’ll get an error saying something like this:
It’s similar than before, our HomeComponent wants to use our cool-component, but it doesn’t know where to find it, or how to use it. For that we need to go back to our HomeModule and add the CoolModule to our imports array:
- Create a new Angular Project.
- Install and Configure Bootstrap.
- Use Bootstrap Tabset Components.
- Methods and Properties:
- NgbTabset.
- NgbTab.
- HTML layout in Tab Title and Content.
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:
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"
And yes, NgbModule is imported in app.module.ts
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
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.
