Does it support Angular 2.1.0?

[protagonist51]

Does it support Angular 2.1.0?

[mhelaiwa]

It works fine for me using angular 2.3.1

[Haseeb717]

Hi @enghelewa can you share code how you do it?

[mhelaiwa]

@Haseeb717 this should work for you

My Module

...

import {Ng2BreadcrumbModule, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';
import {AppComponent}  from './app.component';

...

@NgModule({
    imports: [
        ... ,
        RouterModule.forRoot(APP_ROUTES), //constant holds my routes
        Ng2BreadcrumbModule.forRoot(),
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
        BreadcrumbService,
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

My App Component

...

import {BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

...

@Component({
    selector: 'body',
    templateUrl: '../templates/app.component.html'
})
export class AppComponent implements OnInit,OnDestroy {

    constructor(private breadcrumbService: BreadcrumbService) {
    }

    ngOnInit() {
        this.breadcrumbService.addFriendlyNameForRoute('/home', '');
        this.breadcrumbService.addFriendlyNameForRoute('/campaigns', 'Campaigns');
        this.breadcrumbService.addFriendlyNameForRoute('/projects', 'Projects');
        this.breadcrumbService.addFriendlyNameForRoute('/services', 'Services');
        this.breadcrumbService.addFriendlyNameForRoute('/gallery', 'Gallery');
        this.breadcrumbService.addFriendlyNameForRoute('/about', 'About us');
        this.breadcrumbService.addFriendlyNameForRoute('/contact', 'Contact us');

    }
}

App Component Template

<main class="wrapper">
    <app-header></app-header>
    <div class="page-content">
        <div class="container">
            <breadcrumb></breadcrumb>
        </div>
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</main>

[mhelaiwa]

You should import the service alongside with module import {Ng2BreadcrumbModule, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

you could also remove it from the app module and just put it in your app component providers and the rest of the code remains as it

[Haseeb717]

It gives an error EXCEPTION: this.hideRoutes.includes is not a function

[Haseeb717]

after follow same code

[Haseeb717]

Unhandled Promise rejection: this.hideRoutes.includes is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: this.hideRoutes.includes is not a function(…) TypeError: this.hideRoutes.includes is not a function

[mhelaiwa]

Where did you use this.hideRoutes.includes ?. Be careful when using the variable this it could point to another thing if you use it inside a function callback

[Haseeb717]

Let me show you my code

[Haseeb717]

app.component.ts

import { Component, OnInit } from '@angular/core';
import {BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';

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

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

    ngOnInit() {
    this.breadcrumbService.addFriendlyNameForRoute('/dashboard', 'Home');
    this.breadcrumbService.addFriendlyNameForRoute('/alerts', 'Alerts');
  }
  title = 'e-risk';
}

aap.module.ts

...

import {Ng2BreadcrumbModule, BreadcrumbService} from 'ng2-breadcrumb/ng2-breadcrumb';
import {AppComponent}  from './app.component';

...

@NgModule({
    imports: [
        ... ,
        RouterModule.forRoot(APP_ROUTES), //constant holds my routes
        Ng2BreadcrumbModule.forRoot(),
    ],
    declarations: [
        AppComponent,
        ...
    ],
    providers: [
        ...
        BreadcrumbService,
        ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

[mhelaiwa]

The code you provided looks fine! Please search your code for this.hideRoutes.includes I think like you miss used the this keyword and probably it points to another thing rather than the component class

[arimus]

This may be different, but may also be related. This is what I'm seeing, but only on Safari 8.0.6 (i.e. webkit) and not on Chrome / Firefox. I'll open a separate ticket if needed.

undefined is not a function (evaluating 'this.hideRoutes.includes(route)')

Note: I am using v0.5.6, with webpack, angular 2.4.5, angular router 3.2.4.

[arimus]

Btw, I rebuilt after replacing hideRoutes.includes() calls with hideRoutes.indexOf() tests, things were happier. Then I poked some more on latest Safari versions for OSX Yosemite, which I'm still on (as are many). Looks like I'm quite a bit out of date on Safari updates (10.x is latest), so the issues is my Safari version isn't fully ES5 compatible and hence there is no includes() methods on the Array prototype. Oops.

Worth taking a look at if others experience similar undefined issues. I only ran into this during testing of multiple browsers. I see no mention of browser versions in this thread, which might be helpful for diagnosing.

p.s. going with the indexOf() might be a small burden to allow this library to be used in some of these edge cases.

[Haseeb717]

@arimus on chrome and mozilla also you get this error or not? undefined is not a function (evaluating 'this.hideRoutes.includes(route)')

[arimus]

No, not on my versions. It was only on and older version of Safari that I personally got the error, but this may still be a problem for folks trying to reach a broad audience with browsers that are potentially older. And there are older mobile browsers to think about as well.

It's worth noting that only this library gave me issues out of dozens of libraries including the latest angular 2.x versions. Given how small the change is, it may be worth making...even if I it makes those couple of lines a tad less modern :)

On Feb 12, 2017 2:56 AM, "Haseeb Ahmad" notifications@github.com wrote:

@arimus https://github.com/arimus on chrome and mozilla also you get this error or not? undefined is not a function (evaluating 'this.hideRoutes.includes(route)')

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gmostert/ng2-breadcrumb/issues/44#issuecomment-279210530, or mute the thread https://github.com/notifications/unsubscribe-auth/AAN8KuIOQSl7njxJtVor3te6FSFYPSmyks5rbuV2gaJpZM4L5c5O .

[arimus]

Btw, it also looks like this is an issue in IE 11 (11.0.9600.18792, update: 11.0.46). I get the following:

Object doesn't support property or method 'includes'.

Btw, any word on an update to solve this for browsers that don't support 'includes' on the Array prototype? I'll have to resort to a polyfill otherwise. This library could always just add in a polyfill if includes is not detected, ala...

https://stackoverflow.com/questions/31221341/ie-does-not-support-includes-method

Granted, we don't want to stomp on other potentially loaded polyfills if we can avoid it, so using indexOf() or a filter would be ideal.