Search code examples
angularangular-routing

Trying to create multiple routes inside module (Angular)


I'm new to Angular and am trying to create some routes inside a Module. I have the module route defined and works as expected, i.e. from my homepage I can click this modules route 'localhost:4000/module_name' and it will render that view.

Inside this module I have numerous components, what I am trying to do is set up routes that would end up looking like 'localhost:4000/module_name/component_name'. But for some reason I keep getting page-not-found.

Currently looks like this:

testModule (dir):
   testModule-routing.module.ts
   testModule.component.html
   testModule.component.ts
   testModule.module.ts
   testComponent (dir)
      testComponent.component.html
      testComponent.component.ts
testModule-routing.module.ts:

const routes: Routes = [
  {
    path: 'test_module',
    component: testModuleComponent,
    children: [
      { path: 'test_component', component: testComponentComponent },
    ]
  }
];

testModule.component.html:

<div>
   <a routerLink="test_component">test</a>
</div>

I think this should hypothetically work? But I keep getting page not found.. Any help would be greatly appreciated.


Solution

  • Maybe try to put the routerLink in square brackets.

    <div>
       <a [routerLink]="test_component">test</a>
    </div>
    

    I'm new to Angular, but this is how I do it.