CODEWITHSUNDEEP
angularangular5angular6angular-routing
Omar Abdelhady
Omar Abdelhady

Reputation: 1728

why is RoutingModule not working in my angular app?

edit : please note that everything was working fine before trying to split my app module into feature modules for lazy loading

so I'm Trying to split my app module into other feature modules so that I can use lazy loading in my angular app,

but I'm having an error

"Uncaught Error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'h4'. ("class="col-3"> ]routerLink="/profile/{{castra.id}}/public"> {{castra.name}} "): ng:///CastraModule/CastrasComponent.html@18:85 at syntaxError (compiler.js:215) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674) at compiler.js:22617 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617) at compiler.js:22527 at Object.then (compiler.js:206) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)"

this is my feature Module 

(Imports)

@NgModule({
declarations: [
CastrasComponent,
ProfileComponent,
PublicComponent,
MenuComponent,
ReservationComponent
],
imports: [
CommonModule,
TestRoutingModule
]
})
export class CastraModule { }

my TestRoutingModule

(Imports)
const testRoutes: Routes = [
{path: 'test', component: TestComponent},
{
path: 'profile/:id', component: ProfileComponent,
children: [
  {path: '', redirectTo: '/profile/:id/public', pathMatch: 'full'},
  {path: 'public', component: PublicComponent},
  {path: 'menu', component: MenuComponent},
  {path: 'reservation', component: ReservationComponent},
  ]
 }
]

@NgModule({
imports: [
RouterModule.forChild(TestRoutes)
],
exports: [RouterModule]
})
export class TestRoutingModule { }

and the Test Module is imported in the App module so what is the problem?

Upvotes: 0

Views: 294

Answers (2)

Luis Fernando Hernandez
Luis Fernando Hernandez

Reputation: 114

You can try to use RouterModule.forRoot(TestRoutes) instead of RouterModule.forChild(TestRoutes) it works in my router files

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222532

You probably need? wrap it inside <a> and </a>

<h4><a routerLink="menu">Part1</a></h4>

EDIT

You need to add the RouterModule to imports: [] of every module where you use router directives like RouterOutlet or routerLink.

Upvotes: 1

Related Questions