RouterLink 不会在单击时导航到组件，而是在加载同一模块中的其他组件后导航

Question

In my Angular 8 application I have following routes.

Public routing module:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
  { path: 'reset-password', component: ResetPasswordComponent }
];

User routing module:

const routes: Routes = [
  { path: 'profile', component: UserProfileComponent },
  { path: 'purchase-agreement', component: PurchaseAgreementComponent },
  { path: 'purchase-credit', component: PurchaseCreditComponent },
  { path: 'purchase-confirmation', component: PurchaseConfirmationComponent },
  { path: 'purchase-thankyou', component: PurchaseThankyouComponent },
  { path: 'expenditure-report', component: ExpenditureReportComponent },
  { path: 'subscriptions', component: SubscriptionComponent },
  { path: 'subscribe', component: SubscribeComponent }
];

App routing module:

const routes: Routes = [

  {
    path: 'startup',
    component: StartupComponent,
    canActivate: [AuthenticationGuardService]
  },
  {
    path: 'account',
    loadChildren: () => import('./modules/core-modules/user/user.module').then(m => m.UserModule),
    canActivate: [AuthenticationGuardService]
  },
  {
    path: '**',
    redirectTo: 'startup',
    pathMatch: 'full'
  }
];

Header Html where I have put routerLinks to navigate to account route and it's children:

    <mat-menu #accountMenu [overlapTrigger]="false" yPosition="below">
        <button mat-menu-item [routerLink]="['/account/profile']">
            <mat-icon>person</mat-icon><span>My Profile</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/purchase-agreement']">
            <mat-icon>credit_card</mat-icon><span>Purchase Credits</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/expenditure-report']">
            <mat-icon>timeline</mat-icon><span>Expenditure Report</span>
        </button>
        <button mat-menu-item [routerLink]="['/account/subscriptions']">
            <mat-icon>card_membership</mat-icon><span>Subscriptions</span>
        </button>
        <mat-divider></mat-divider>
        <button mat-menu-item (click)="logout()">
            <mat-icon>exit_to_app</mat-icon>Logout
        </button>
    </mat-menu>

App Module Code:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

// Helper Classes
import { JwtInterceptor, ErrorInterceptor, LoaderInterceptor } from 'app/_helpers';

// Feature Modules.
import { PublicModule } from 'app/modules/core-modules';

// Shared Functionality Modules.
import { MaterialElementsModule, SharedModule } from 'app/modules/generic-modules';

import { AppRoutingModule, mainRoutedComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent, FooterComponent } from 'app/components';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    mainRoutedComponents
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
    MaterialElementsModule,
    PublicModule,
    AppRoutingModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Problem:

After login, I am taken to startup component, where header component is visible. And I click on my profile link and it does not load . But when I click on any other route/ link below it, I am being able to navigate to those components.After navigating to working components again I click on my profile from header. This time I am being take to profile component.

This is the console error I am getting when I try to navigate to my profile component after login.

Kindly provide some insight about this error. How is it can be solved?

Answer 1

I think, after login when you are trying to navigate to profile for very first time than Account Module is not loaded that is why URL Path is not completed and you redirect to the startup due to this route

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

You have to make sure that your account module is loaded first