Angular can not navigate to child component

Question

I have a problem by implementing routing with angular 7. the code is easy, but I can not find, what the problem is. maybe you can help me.

the codes as follows:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <a routerLinkActive="active" 
       routerLink="/login">Login</a> |

    <a routerLinkActive="active" 
       routerLink="/home/catalog">Homasdfasdfe</a> | 
      
    <a routerLinkActive="active" 
       routerLink="/home/">Home</a> | 

    <a routerLinkActive="active" 
      routerLink="/catalog">Catalog</a> 
      
    <router-outlet></router-outlet>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

}

app-routing.module.ts:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent, children: [
         { path: 'catalog', component: CatalogViewComponent }
      ] },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
  declarations: [ AppComponent],
  imports: [ 
    AppRoutingModule, 
    BrowserModule, FormsModule, HttpModule 
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

the problem is, if I click Homasdfasdfe, it will show the content of home, not catalog.

any solutions?

Best regards,

Leo

If you want /catalog to be routed why do you add /home/catalog as path? — GaryB
– GaryB, Commented Mar 6, 2019 at 15:54
Hi Gary, I just want to try if /catalog as child route is, wether it also works. if I delete /catalog, it can also not naviate to /home/catalog. — user1938143
– user1938143, Commented Mar 7, 2019 at 5:38
Hi Julien, yes I have imported AppRoutingModule, I have also inserted the code. — user1938143
– user1938143, Commented Mar 7, 2019 at 5:38

Eeshwar Ankathi · Accepted Answer · 2019-03-07 07:00:17Z

1

Try changing the route for home as below.

RouterModule.forRoot([
   { path: 'login', component: LoginViewComponent },
   { path: 'home', children: [
      { path:'', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent }
   ]},
   { path: 'catalog', component: CatalogViewComponent },
   { path: '**', redirectTo: 'login' }
])

answered Mar 7, 2019 at 7:00

Eeshwar Ankathi

2663 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher Sabin · Accepted Answer · 2019-03-06 16:10:45Z

0

I think your problem is that you use the "CatalogViewComponent" component in a child route and then in a primary road just below it. Try to delete the primary "catalog" route, maybe this will solve your problem.

answered Mar 6, 2019 at 16:10

Christopher Sabin

745 bronze badges

1 Comment

user1938143 Over a year ago

Hi Christopher, I have tried your solution, but it was also not woriking. that is the same problem as usual.

Collectives™ on Stack Overflow

Angular can not navigate to child component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related