DynamicRouting

I have an application that uses a typescript file for setting up links and within the template I use ngFor to interpolate through the links and build a navigation bar. Within those link objects there is a property called link.path containing the path to be redirected to. I use [routerLink] to redirect to the path required, which works fine, but I was not at the root url. I need to achieve this functionality, which appends the child route to the root of the application. However, after changing my implementation to:

[routerLink]= '["/link.path"]'

On click I am redirected to /link.path rather than / which naturally gives me a not found error.

how do i change my expression above to show the actual value inside this parameter rather than giving me link.path as a string?

component.ts

I am working on Angular 6 application. I have requirements to load dynamic routes from database. so to achieve this I have injecting Routes service class (DynamicRoutingService) which is responsible to load static and dynamic routes from database and add in app.module.ts --> RouterModule.forRoot(RouteCollection).

In DynamicRoutingService class, I am loading data using subscribe method, my issue is the page of requested url is render before subscribe method get http result hence, application throw error of invalid route.

I am come across to use resolve and promise to solve this but not sure exactly I do that and that is where I need help

I Angular 6 application, I am passing angular routes from service class in format

I'm setting up dynamic routing for my application in angular 6, and when I run the application there are no compile errors, but once I click on a link (say, knowledge base) it gives me the following error:

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/knowledge-base'

I followed the tutorials Here and Here for applying dynamic routing to my application, which would allow components to create links, display them on screen and redirect when clicked. For testing I have created a dummyComponent, which would be used by every route initially, but will be replaced by actual components when this is working.

However, due to the error above, I was not able to go anywhere with this. I tried browsing through the current solutions and the most relevant ones were this and this, but they wouldn't really solve the problem I'm having. Am I missing something perhaps?

Here is my code:

toolbar.component.ts

Previously, I put all routing in one file, like this

I am learning react-router dynamic routing from this link https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md. The huge-apps project is the one I am looking into. I cloned the react-router git repo from https://github.com/ReactTraining/react-router and followed the instruction to set it up. Everything works fine here. But I don't understand some parts of the configuration in webpack configuration under examples directory.

Below is the output of the webpack config: