How to route with readable URL Paths?

angular
1

I want to have readable URLs instead of using IDs in my URL path.

Like localhost:3000/tab/home to go to the Home Tab

So I added a path attribute to my tab model:

import { CollectionObject } from './collection-object.model';

export interface Tab extends CollectionObject {
    name: string;
    path: string;
}

And in my Routing I set the parameter to the path attribute of the tab:

...
export const routes: Route[] = [
    { path: 'tab/:tabPath', component: TabViewComponent }
];

Since I deactivated autopublish I had to write a publications file that deliveres me the tab with the corresponding path attribute:

...
Meteor.publish('tab', function (tabPath: string) {
    return Tabs.find({ path: tabPath });
});

And this is how I tried to get the tab on my TabViewComponent on the client side:

...
export class TabViewComponent implements OnInit, OnDestroy {
    tabSub: Subscription;
    paramsSub: Subscription;
    tabPath: string;
    tab: Tab;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.paramsSub = this.route.params
            .map(params => params['tabPath'])
            .subscribe(tabPath => {
                this.tabPath = tabPath;

                if (this.tabPath) {
                    if (this.tabSub) {
                        this.tabSub.unsubscribe();
                    }

                    this.tabSub = MeteorObservable.subscribe('tab', this.tabPath).subscribe(() => {
                        this.tab = Tabs.findOne({ path: this.tabPath });
                    });
                }
            });
    }

    ngOnDestroy() {
        this.paramsSub.unsubscribe();
        if (this.tabSub) {
            this.tabSub.unsubscribe();
        }
    }
}

I have no Idea why I cannot find my Tab. Can anyone help me or does anyone have a better solution to this problem?