Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module

Question

Error

compiler.js:215 Uncaught Error: Template parse errors: Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden">

I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.

app.module

import { AdminComponent } from './admin/admin.component';
// import { NavbarComponent } from './navbar/navbar.component';
// import { FooterComponent } from './footer/footer.component';

// Modules
import { DashboardModule } from './dashboard/dashboard.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    PasswordResetComponent,
    ResetPasswordComponent,
    AdminComponent,
    // NavbarComponent,
    // FooterComponent,

share.module

However, once I moved those components into here, and update their paths correctly ./ -> ../ the app breaks.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NavbarComponent } from '../navbar/navbar.component';
import { FooterComponent } from '../footer/footer.component';
import { TermsComponent } from './terms.component';
import { PageNotFoundComponent } from './not-found.component';
import { PrivacyPolicyComponent } from './privacy-policy.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ]
})
export class SharedModule { }

navbar.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  isHidden = true;
  oauthUrl = this.authService.generateOauthUrl();

  constructor(public authService: AuthService) { }

  ngOnInit() {
  }

  logout() {
    sessionStorage.clear();
  }
}

Then a couple of lines with the [ngbCollapse] in navbar.component.html

<div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden">

I think this has something to do with the relative paths, any ideas?

Are you using `ng-bootstrap`? If so, add `NgbModule` to the imports section of the `SharedModule`. — ConnorsFan, Sep 10 '18 at 20:11
@ConnorsFan Ah thanks! Yeah that was it :) now I'm getting a different error `'app-navbar' is not a known element:` but that is a different question, care to post the full answer? I did forget to import that in the new shared.module. — Leon Gaban, Sep 10 '18 at 20:16
For the second error, you probably need to add the shared components (e.g. `NavbarComponent`) to the `exports` of the `SharedModule`, and to import the `SharedModule` in the module where the components are actually used. — ConnorsFan, Sep 10 '18 at 20:20
Hmm I am importing the `NavbarComponent` and I'm exporting the `SharedModule` in the code above, or is there another place I missed? — Leon Gaban, Sep 10 '18 at 20:22

score 32 · Accepted Answer · answered Sep 10 '18 at 20:35

To use ng-bootstrap components and directives in Angular templates, you need to import the NgbModule. In your case, you should import it in the SharedModule. Also, in order to use the shared components in other parts of the application, you should export them from the SharedModule and import the SharedModule in the modules when the components are to be used.

shared.module.ts

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    CommonModule,
    NgbModule
  ],
  declarations: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ],
  exports: [
    NavbarComponent,
    FooterComponent,
    TermsComponent,
    PageNotFoundComponent,
    PrivacyPolicyComponent
  ]
})
export class SharedModule { }

app.module.ts

import { SharedModule } from './shared/shared.module';
...

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  ...
})

Note: if you want to use ng-bootstrap components and directives in templates outside of the SharedModule, you should add NgbModule to the exports of the SharedModule.

AH gotcha :) about the exports array – Leon Gaban Sep 10 '18 at 20:40 — Leon Gaban, Sep 10 '18 at 20:40

score 1 · Answer 2 · answered Dec 08 '21 at 09:59

To work with ng-bootsrap you should add this dependency first :

ng add @ng-bootstrap/ng-bootstrap

source: https://ng-bootstrap.github.io/#/home

then imporst the module as follows :

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    
    @NgModule({
      imports: [
        CommonModule,
        NgbModule
      ],
...

Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module

2 Answers2

Linked