gmostert / ng2-breadcrumb

This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102 stars 81 forks source link

Error while using lazy loading #60

Open cre8 opened 7 years ago

cre8 commented 7 years ago

Angular throws an Cannot read property 'lastIndexOf' of undefined TypeError: Cannot read property 'lastIndexOf' of undefined Error when trying to access a lazy loaded url.

Loading directly a lazy loaded url works, but after accessing one after the app is started it throws an error.

Does anyone know a solution for this problem? I think I am not the only one with this problem.

evanjmg commented 7 years ago

This is resolved - upgrade to the latest - https://github.com/gmostert/ng2-breadcrumb/issues/57

cre8 commented 7 years ago

Negativ, I have the latest version (0.5.14 with npm) and it throws the error when i try to access '/module/1' from e.g. '/dashboard'. Without the plugin everything works fine with Angular4:

{
        path: 'module',
        loadChildren: 'app/subject/subject.module#SubjectModule'
},
cre8 commented 7 years ago

I think I found the error:

I checked the js file and found no line where the instance of navigationEnd was checked:

BreadcrumbComponent.prototype.ngOnInit = function () {
        var _this = this;
        this._urls = new Array();
        if (this.prefix.length > 0) {
            this._urls.unshift(this.prefix);
        }
        this._routerSubscription = this.router.events.subscribe(function (navigationEnd) {
            _this._urls.length = 0;
            _this.generateBreadcrumbTrail(navigationEnd.urlAfterRedirects ? navigationEnd.urlAfterRedirects : navigationEnd.url);
        });
    };

Adding if(navigationEnd instance of NavigationEnd) throws an error so I added if(navigationEnd.urlAfterRedirects || navigationEnd.url) and now it works:

if(navigationEnd.urlAfterRedirects || navigationEnd.url)
_this.generateBreadcrumbTrail(navigationEnd.urlAfterRedirects ? navigationEnd.urlAfterRedirects : navigationEnd.url);
plastikaweb commented 7 years ago

Same issue for me, and the @cre8 solution also fixes my problem.

evanjmg commented 7 years ago

The instanceof operator filters the router events to make sure that only navigation end events affect the breadcrumbs, router events could also be Navigation start, if(navigationEnd.urlAfterRedirects || navigationEnd.url)- yet this check does not guarantee that it is NavigationEnd as NavigationStart also has those attributes. Maybe one could include this check as well, but according to the angular docs url and urlAfterRedirects are always properties of NavigationEnd - ? @gmostert is it supposed to run on start and end or just end? @plastikaweb and @cre8 could you give me a console error or plunkr to see what end of error you're getting for this? See the docs for more info: https://angular.io/docs/ts/latest/api/router/index/NavigationStart-class.html https://angular.io/docs/ts/latest/api/router/index/NavigationEnd-class.html