Why does Angular router call ngOnInit of wrong component and route?

Question

I have an Angular application.

I recognized that some network requests of one page are executed on all other pages too.

I did some investigation and recognized that the ngOnInit method of one of my components (route: invoices, component: RechnungenComponent) is called on each other page too without any obvious reason.

I activated router tracing which shows the following:

Router Event: NavigationStart vendor.js:134357:37
Router Event: RoutesRecognized vendor.js:134357:37
Router Event: GuardsCheckStart vendor.js:134357:37
GuardsCheckStart(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ChildActivationStart vendor.js:134357:37
ChildActivationStart(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ActivationStart vendor.js:134357:37
ActivationStart(path: 'imprint') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: GuardsCheckEnd vendor.js:134357:37
GuardsCheckEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } , shouldActivate: true) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…}, shouldActivate: true }
vendor.js:134352:35
Router Event: ResolveStart vendor.js:134357:37
ResolveStart(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ResolveEnd vendor.js:134357:37
ResolveEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'imprint', path:'imprint') }  } ) vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint", state: {…} }
vendor.js:134352:35
Router Event: ActivationEnd vendor.js:134357:37
ActivationEnd(path: 'imprint') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ChildActivationEnd vendor.js:134357:37
ChildActivationEnd(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ActivationEnd vendor.js:134357:37
ActivationEnd(path: '') vendor.js:134352:35
Object { snapshot: {…} }
vendor.js:134352:35
Router Event: ChildActivationEnd vendor.js:134357:37
ChildActivationEnd(path: '') vendor.js:134352:35
{…}
​
snapshot: Object { url: [], outlet: "primary", _lastPathIndex: -1, … }
​
<prototype>: Object { toString: toString()
, … }
vendor.js:134352:35
Router Event: NavigationEnd vendor.js:134357:37
NavigationEnd(id: 10, url: '/imprint', urlAfterRedirects: '/imprint') vendor.js:134352:35
Object { id: 10, url: "/imprint", urlAfterRedirects: "/imprint" }
vendor.js:134352:35
Router Event: Scroll vendor.js:134357:37
Scroll(anchor: 'null', position: 'null') vendor.js:134352:35
Object { routerEvent: {…}, position: null, anchor: null }
vendor.js:134352:35

It reveals that I changed to route imprint, however, the other component's route (invoices) whose ngOnInit gets called does not occur there.

My routes look as follows, and I cannot see any obvious mistake here:

export const appRoutes: Routes = [
  {
    path: 'login',
    component: SplashScreenComponent,
    canActivate: [UnauthGuard]
  },
  {
    path: 'signup',
    component: SplashScreenComponent,
    canActivate: [UnauthGuard]
  },
  {
    path: 'logout',
    component: LogoutComponent
  },
  {
    path: 'buy',
    component: BuyWizardComponent,
    resolve: { steuerberater: SteuerberaterResolver }
  },
  {
    path: '',
    component: ShellComponent,
    canActivate: [AuthGuard],
    resolve: {
      store: StoreResolver,
      belegkreise: BelegkreisResolver
    },
    children: [
      {
        path: 'invoices',
        component: RechnungenComponent
      },
      {
        path: 'invoices/new',
        component: KategorieSelectComponent
      },
      {
        path: 'invoices/:id',
        component: RechnungComponent,
        canDeactivate: [CanDeactivateGuard],
        resolve: { data: RechnungResolver }
      },
      {
        path: 'mobile/preview',
        component: MobilePreviewComponent
      },
      {
        path: 'mobile/crop',
        component: MobileCropComponent
      },
      {
        path: 'mobile/new',
        component: MobileCameraComponent,
        canDeactivate: [CanDeactivateGuard]
      },
      {
        path: 'categories',
        component: KategorienComponent
      },
      {
        path: 'vendors',
        component: LieferantenComponent
      },
      {
        path: 'uploads',
        component: UploadListComponent
      },
      {
        path: 'settings',
        component: SettingsComponent
      },
      {
        path: 'imprint',
        component: ImprintComponent
      },
      {
        path: 'statistics',
        component: StatisticsComponent
      },
      {
        path: 'help',
        component: HelpComponent
      },
      {
        path: '',
        redirectTo: 'invoices',
        pathMatch: 'full'
      },
      {
        path: '**',
        redirectTo: 'invoices',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Do you see any obvious misconfiguration here? Do you have any other idea what the reason for this behaviour could be?

Answer 1

Finally, I have found out that the problem was caused by a subscription which has not been released.

Answer 2

Try adding pathMatch: full:

  {
    path: '',
    pathMatch: 'full',
    component: ShellComponent,
    canActivate: [AuthGuard],
    resolve: {
      store: StoreResolver,
      belegkreise: BelegkreisResolver
    },
    children: [
```

Answer 3

That's because of this wildcard route

{
    path: '**',
    redirectTo: 'invoices',
    pathMatch: 'full'
}

because of that entry, in all routes that component is always initiated https://angular.io/api/router/Route#wild-cards (according to this)

remove that entry, and it would solve your issue