CODEWITHSUNDEEP
angulartypescriptcommand-line-interface
Metallistener
Metallistener

Reputation: 197

need to help, child-component duplicate after click to link in Angular

Work with child-component routes 

const SignupRoutes: Routes = [
  { path: 'firstStep', component: FirstStepComponent, pathMatch: 'full' },
  { path: 'secondStep', component: SecondStepComponent, pathMatch: 'full' },
  { path: 'thirdStep', component: ThirdStepComponent, pathMatch: 'full' },
];

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'index', component: IndexComponent },
  { path: 'service', component: ServicesComponent },
  { path: 'indoor', component: IndoorComponent },
  { path: 'invoice', component: InvoiceComponent },
  { path: 'report', component: ReportComponent },
  { path: 'settings', component: SettingsComponent },
  { path: 'shop', component: ShopComponent },
  { path: 'signup2', component: SignupComponent, children: SignupRoutes },
  { path: 'password', component: PasswordComponent },
  { path: 'settings/telephones', component: TelephonesComponent },
  { path: 'settings/password-edit', component: PasswordEditComponent },
  { path: '**', redirectTo: '/login'}
];

My problem is duplicate child components which after clicking on the next step button not replace each other. I get list of child-component as in the screenshot enter image description here How cai I fix this problem?May be I need somehow to clean old child-components?

Upvotes: 0

Views: 72

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657741

Change 

{ path: '', component: LoginComponent },

to

{ path: '', component: LoginComponent, pathMatch: 'full' },

You need this when a route has an empty path but no child routes.

Upvotes: 1

Related Questions