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?

Covert

Are you using ng-bootstrap? If so, add NgbModule to the imports section of the SharedModule. – Nosegay

@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. – Covert

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. – Nosegay

Hmm I am importing the NavbarComponent and I'm exporting the SharedModule in the code above, or is there another place I missed? – Covert

Answer 1

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.

Nosegay

AH gotcha :) about the exports array – Covert

Answer 2

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
      ],
...

Onetime