Получение ngbCollapse, поскольку оно не является известным свойством div. ошибка после перемещения компонентов в субмодуль

Question

Ошибка

compiler.js:215 Uncaught Error: Ошибки синтаксического анализа шаблона: невозможно связать с 'ngbCollapse', так как это не известное свойство 'div'. ("][NgbCollapse]=" IsHidden">

У меня есть NavbarComponent и FooterComponent, которые я хочу переместить в SharedModule, чтобы сохранить корневой app.module более чистым.

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

Однако, как только я переместил эти компоненты сюда и корректно обновил их пути ./ -> ../ приложение ломается.

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();
  }
}

Затем пара строк с [ngbCollapse] в navbar.component.html

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

Я думаю, что это как-то связано с относительными путями, есть идеи?

Answer 1

Использовать ng-bootstrap компоненты и директивы в угловых шаблонах, вам необходимо импортировать NgbModule, В вашем случае вы должны импортировать его в SharedModule, Кроме того, чтобы использовать общие компоненты в других частях приложения, вы должны экспортировать их из SharedModule и импортировать SharedModule в модулях, когда компоненты должны быть использованы.

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

Примечание: если вы хотите использовать ng-bootstrap компоненты и директивы в шаблонах вне SharedModule, вы должны добавить NgbModule к exports из SharedModule,

Answer 2

Для работы с ng-bootsrap вы должны сначала добавить эту зависимость:

нг добавить @ng-bootstrap/ng-bootstrap

источник: https://ng-bootstrap.github.io/#/home

затем импортируйте модуль следующим образом:

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