After setting up dynamic routing for my Angular 6 application, I encountered an error when clicking on a link (for example, 'knowledge base') that stated:
core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'main/knowledge-base'
I referred to tutorials Here and Here for implementing dynamic routing in my application to enable components to create links, display them, and redirect when clicked. To test this, I created a dummyComponent that each route initially uses, to be replaced by actual components once it's functional.
Despite following these resources, the error prevented progress. I looked into possible solutions like this and this, but they didn't resolve my issue. Is there something I overlooked?
Below is the code snippet:
toolbar.component.ts
// Code snippet for toolbar.component.ts
toolbar.component.html
// Code snippet for toolbar.component.html
dynamic-routing.service.ts
// Code snippet for dynamic-routing.service.ts
app.routing.ts
// Code snippet for app.routing.ts
Expected: Links should redirect to routes like "main/name"
Actual: Error message displayed upon clicking on a link.