0

I have an angular application with user configurable "tabs". These tabs are supposed to each have a URL eg. http://localhost:3000/ui/tabName

My tabs are defined in an external JSON file similar to:

{
  "tabs": {
  "tab1": {
    "url": "tab1url"
  },
  "tab2": {
    "url": "tab2url"
  }
}

I've tried loading this config and defining routes in both my AppModule constructor and my AppComponent constructor (my app is bootstrapped on AppComponent). 

        for (let tab in tabsJson.tabs) {
            if (tabsJson.tabs.hasOwnProperty(tab)) {
                let url: string = tabsJson.tabs[tab]['url'];
                if (url !== null && url !== undefined && url.length > 0) {
                    let route: Route = {
                        path: url,
                        component: TabComponent
                    };

                    if (route.path !== undefined && route.path !== null) {
                        this.router.resetConfig([route, ...this.router.config]);
                    }
                }
            }
        }

I get this error when I try to navigate to one of my custom tabs via URL: 

errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot match any routes.

Is there a way to make angular execute some code before any routing occurs? Is it even possible to dynamically define my routes like this?

Thank you very much for your time.

Ben P
  • 115
  • 9
  • you should follow a different approach, declare the tab name as a parameter and use dynamic components to show the component/view that you want – Ricardo Feb 26 '18 at 17:39
  • no what you are trying won't work, angular needs a defininition for routing in at least app-routing.module.ts in order to work,... it might be possible to load your json there in order to provider routing definitions – Nickolaus Feb 26 '18 at 17:42

0 Answers0