web-dev-qa-db-fra.com

Obtention de 'ngbCollapse' car ce n'est pas une propriété connue de 'div'. erreur après le déplacement des composants dans le sous-module

Erreur

compiler.js: 215 Erreur non interceptée: erreurs d'analyse de modèle: impossible de se lier à 'ngbCollapse' car ce n'est pas une propriété connue de 'div'. ("] [ngbCollapse] =" isHidden ">

J'ai un NavbarComponent et un FooterComponent que je veux déplacer dans le SharedModule, pour garder le root app.module plus propre.

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

Cependant, une fois que j'ai déplacé ces composants ici et mis à jour leurs chemins correctement ./ -> ../ l'application se casse.

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

Ensuite, quelques lignes avec le [ngbCollapse] dans navbar.component.html

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

Je pense que cela a quelque chose à voir avec les chemins relatifs, des idées?

javascriptangularangular-componentsangular-module
8
Leon Gaban

Utiliser ng-bootstrap composants et directives dans Angular, vous devez importer le NgbModule. Dans votre cas, vous devez l'importer dans le SharedModule. De plus, dans Pour utiliser les composants partagés dans d'autres parties de l'application, vous devez les exporter depuis SharedModule et importer les SharedModule dans les modules lorsque les composants doivent être utilisés.

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

Remarque: si vous souhaitez utiliser ng-bootstrap composants et directives dans les modèles en dehors du SharedModule, vous devez ajouter NgbModule au exports du SharedModule.

9
ConnorsFan