Angular 4 routing duplicate component for a particular path

Question

I have a weird problem , that when a particular route is directly launched the component is added twice in the dom, but when navigated from main page it works fine.

The problem is with contact route ContactComponent

You can check that live on this website

Go to http://ootybookings.in/#/main/contact
You can see the contact component added twice
Now click on Home Menu/Link at top and then Click Contact Menu/Link
Now the duplicate is gone

All other routes are fine. Only contact route is making this problem.

Config

    "@angular/animations": "^4.4.6",
    "@angular/common": "^4.4.6",
    "@angular/compiler": "^4.4.6",
    "@angular/core": "^4.4.6",
    "@angular/forms": "^4.4.6",
    "@angular/http": "^4.4.6",

Routes

const routes: Routes = [
  {
    path: '',
    redirectTo: 'welcome',
    pathMatch: 'full'
  },
  {
    path: 'welcome',
    component: WelcomeComponent
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'main',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'tour-packages',
        pathMatch: 'full'
      },
      {
        path: 'tour-packages',
        component: TourPackagesComponent
      },
      {
        path: 'tour-package/:name',
        component: TourPackageDetailComponent
      },
      {
        path: 'activities',
        component: ActivitiesComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'who-we-are',
        component: WhoWeAreComponent
      },
      {
        path: 'why-ooty',
        component: WhyOotyComponent
      },
      {
        path: 'services',
        component: TourServicesComponent
      },
      {
        path: 'blogs',
        component: BlogComponent
      },
      {
        path: 'blog/:name',
        component: BlogDetailComponent
      },
      {
        path: 'offers',
        component: OffersComponent
      },
      {
        path: 'terms',
        component: TermsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'refund',
        component: RefundPolicyComponent
      }

    ]
  }
  
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

How can I resolve this? Is there a problem with my routing module? I've checked similar questions on SO and other sites, but I cannot find a solution.

This normally occurs when the compiler runs into an error, and isn't linked to routing. I'm seeing tons of console errors, so I'm guessing it's related to compilation error. — Z. Bagley, Nov 11 '17 at 17:14
@Z.Bagley Compilation errors will be shown beforehand. This is not that. Those console errors you see are warnings due to google maps. — Madhan, Nov 11 '17 at 17:16
@Madhan, did you try debugging with anableTracing , one issue may be the contact route defined in two places - https://angular.io/guide/router#remove-duplicate-hero-routes — divya reddy, Nov 11 '17 at 17:28
Run time error that can occur when the angular compiler (either downloaded by client, or running on the server) breaks (errors). The duplication is _normally_ because angular compiler is failing to properly render the DOM. Likely due to an element's directive not writing properly, or a viewchild w/ an async that's not loading correct, etc. Run into this often, and never had routing the cause. — Z. Bagley, Nov 11 '17 at 17:58

score 0 · Answer 1 · answered Nov 12 '17 at 06:52

I guess routing is not the problem, I'm using Angular Mdl

I've mentioned <dialog-outlet></dialog-outlet>(needed for Mdl dialogs) in two different places, which lead to this issue. Don't know why it affected a particular component. After removing that, the route works fine.

Angular 4 routing duplicate component for a particular path

1 Answers1