Issue after upgrading to ng5-breadcrumb and Angular 5.0

[udayvunnam]

getting below error in console
compiler.js:466 Uncaught Error: Template parse errors:
Can't bind to 'useBootstrap' since it isn't a known property of 'breadcrumb'. ("

][useBootstrap]="false" prefix="Pepper Ops">

<div class="main-wrapper">

"): ng:///PagesModule/PagesComponent.html@30:16
'breadcrumb' is not a known element:

1. If 'breadcrumb' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

[ERROR ->]

[solenovex]

Got same error under angular 5.0, is there any fix yet?

[aissam-ahbar]

Hi guys,

Thanks for the report. I think the issue is that the export module might be missing.

I am using the ng5-breadcrumb in my app from my NPM repo that is a bit different from the one in Github because I added the export of the module within an "index.ts", which is a bit different than the one I provided in Github.

To use it like me, please install the following:

npm install ng5-breadcrumb --save

You can import the this module into your module and manually provide its service
// app.module.ts

import {ng5BreadcrumbModule, BreadcrumbService} from 'ng5-breadcrumb';

@NgModule({
    imports: [ng5BreadcrumbModule],
    providers: [BreadcrumbService]
})
export class AppModule {
    ...
}

// Inject the BreadcrumbService into your component to map your routes
// app.component.ts

export class AppComponent {
    constructor(private breadcrumbService: BreadcrumbService) {
    }
}

// app.component.html

<breadcrumb></breadcrumb>
<router-outlet></router-outlet>

Here is the detailed solution till I update the github version:
https://www.npmjs.com/package/ng5-breadcrumb

[evanjmg]

I've tried this solution - not using forRoot() and it doesn't seem to work, the component still does not register. Please resolve the export and update the npm details

[aissam-ahbar]

Hi guys,

Thanks for the information.
I already resolved the export in the code I provided in Github (for NPM I will do it ASAP) and submitted a pull request.

Did you try to clone my project ?
https://github.com/aissamJ/ng2-breadcrumb

You just need to run the following:

npm install
ng serve

It uses the forRoot() that is fully working in my projects.

[udayvunnam]

@aissamJ, we are still getting the error that component isn't registered. I followed below steps.

To use it like me, please install the following:

npm install ng5-breadcrumb --save
You can import the this module into your module and manually provide its service
// app.module.ts

import {ng5BreadcrumbModule, BreadcrumbService} from 'ng5-breadcrumb';

@NgModule({
imports: [ng5BreadcrumbModule],
providers: [BreadcrumbService]
})
export class AppModule {
...
}
// Inject the BreadcrumbService into your component to map your routes
// app.component.ts

export class AppComponent {
constructor(private breadcrumbService: BreadcrumbService) {
}
}
// app.component.html

[evanjmg]

Upon adding the old ng2-breadcrumb directly into a massive sass project (30+ components use breadcrumbs lazily) without npm, everything works properly for angular 5 ( @uday4vunnam This is the best workaround at the moment. - not using ng5-breadcrumb, but copying the existing source code ) It is simply the build system and exporting that needs reworking - not a complete rewrite or reformatting. To support the cli changes made in angular 5, I'm looking into setting up an npm boilerplate in the future and will apply changes and make a pr later on

[djanesch]

@gmostert is there a way to get this working in the next few days?

[alexdevmotion]

I'm running into the same issue after upgrading to Angular 5.1.1 and migrating from ng2-breadcrumb to ng5-breadcrumb.

My current workaround is to manually import the component and the service:

import { BreadcrumbComponent, BreadcrumbService } from 'ng5-breadcrumb';
...
@NgModule({
  declarations: [
    ...
    BreadcrumbComponent,
  ],
  providers: [
    ...
    BreadcrumbService,
  ],
  ...
})
export class AppModule { }

However, this causes the AOT build to fail:
Type BreadcrumbComponent ... is part of the declarations of 2 modules: AppModule and Ng5BreadcrumbModule

[aissam-ahbar]

Hi guys,

Sorry for the delay. I've been quite busy these days.

Could you please try out the new version I published in NPM (0.0.6) and working for me:
npm install ng5-breadcrumb

Please let me if all is OK for you.

Kind regards,
Aissam

[alexdevmotion]

@aissamJ Works fine now (0.0.6). Thank you for taking the time to implement the upgrade!

[KaranIsCool]

I am trying to integrate the latest version 0.0.6 of ng5-breadcrumb into my new project. But it is giving me this error all the time.

The package is present in my project as shown in the above screenshot.

Error loading http://localhost:28939/node_modules/ng5-breadcrumb as "ng5-breadcrumb" from http://localhost:28939/client/app/app.module.js

Please suggest where am i making the mistake.

My app.component.ts looks this this at the moment :-

import { Component } from '@angular/core';
import { BreadcrumbService } from 'ng5-breadcrumb';

@component({
selector: 'my-app',
templateUrl: './app.component.html'
})

export class AppComponent {
constructor(private breadcrumbService: BreadcrumbService) {
console.log(breadcrumbService);
}
}

[amaletic]

Hi, I think i know what a problem is when you go directly on page nothing is shown. Problem is that component logic is triggered on routeChanges only and ng changes. There is workaround. Use reference for component

<breadcrumb class="breadcrumb" [useBootstrap]="false" #breadcrumb>

in your root component / app content trigger this
export class ContentComponent implements OnInit {

@ViewChild('breadcrumb') breadcrumb: BreadcrumbComponent;
ngOnInit() {
//FIX btadcrump not showing ad begining
setTimeout(() => {
this.breadcrumb.ngOnChanges(new Object());
})

}