title: Getting 'ngbCollapse' since it isn't a known property of 'div'. error after moving components into sub module
body: <p>Error</p>
  
  <blockquote>
    <p>compiler.js:215 Uncaught Error: Template parse errors:
    Can't bind to 'ngbCollapse' since it isn't a known property of 'div'. ("][ngbCollapse]="isHidden"></p>
  </blockquote>
  
  <p>I have a NavbarComponent and a FooterComponent that I want to move into the SharedModule, to keep the root app.module cleaner.</p>
  
  <p><strong>app.module</strong></p>
  
  <pre><code>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,
  </code></pre>
  
  <p><strong>share.module</strong></p>
  
  <p>However, once I moved those components into here, and update their paths correctly <code>./</code> -> <code>../</code> the app breaks.</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>navbar.component.ts</strong></p>
  
  <pre><code>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();
    }
  }
  </code></pre>
  
  <p>Then a couple of lines with the <code>[ngbCollapse]</code> in <strong>navbar.component.html</strong></p>
  
  <pre><code>&lt;div *ngIf="!authService.isLoggedIn()" class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isHidden"&gt;
  </code></pre>
  
  <p>I think this has something to do with the relative paths, any ideas?</p>