Angular 17: Module '"xng-breadcrumb"' has no exported member 'BreadcrumbModule'.

[charmbv]

🐞 Bug report

Description

Upgraded to version v11.0.0 of xng-breadcrumb and now get the following error:

Module '"xng-breadcrumb"' has no exported member 'BreadcrumbModule'.

when I try to import the module. This is with Angular v17.3.4 and not using standalone components.

Angular Version:

Angular CLI: 17.3.4
Node: 20.11.0
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.3.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, material-luxon-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.4
@angular-devkit/build-angular   17.3.4
@angular-devkit/core            17.3.4
@angular-devkit/schematics      17.3.4
@schematics/angular             17.3.4
ng-packagr                      17.3.0
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

[github-actions]

👋 Hey @charmbv


Thanks for flagging your first issue! We're on it! Please provide all the details you can


Got a fix? Send a PR! 🚀 Check out our local dev guide

If you like this project, please ⭐star⭐ our repo.

[udayvunnam]

@charmbv With Angular 17+, we use standalone components.

https://udayvunnam.github.io/xng-breadcrumb/#/quickstart?id=standalone-components

Try this -

import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb';

@Component({
  standalone: true,
  imports: [RouterModule, BreadcrumbComponent, BreadcrumbItemDirective],
  templateUrl: './app.component.html',
  ...
})
export class AppComponent {}

[charmbv]

@udayvunnam Won't work as I'm not using standalone components. This is not a requirement for using Angular 17+ so it shouldn't be a requirement for this library as well.

[TomislavMedved]

Any update on this?

[Aman-Ansari-03]

@charmbv @TomislavMedved @charmbv Try using the lower version npm install [email protected] their might be some dependency errors but if you Confidentially find everything correct then run this command npm install [email protected] --legacy-peer-deps.

[charmbv]

This is not a proper solution to the issue. I've been using overrides but will be looking for another solution.

[klekovkinda]

After migrating to Angular 17, I've encountered the same issue. This library is now requiring unexpected refactoring.

[diep1989]

Any update?

[JakeAi]

Instead of

import { BreadcrumbModule } from 'xng-breadcrumb';
@NgModule({
  imports: [
    BreadcrumbModule,
  ],

Use

import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb';
@NgModule({
  imports: [
    BreadcrumbComponent, BreadcrumbItemDirective,
  ],

[bahnhub]

Instead of

import { BreadcrumbModule } from 'xng-breadcrumb';
@NgModule({
  imports: [
    BreadcrumbModule,
  ],

Use

import { BreadcrumbComponent, BreadcrumbItemDirective } from 'xng-breadcrumb';
@NgModule({
  imports: [
    BreadcrumbComponent, BreadcrumbItemDirective,
  ],

The provided solution from JakeAi worked for me