I've encountered a strange issue that I'm not sure how to handle. In my application, you can either view your public account or create a new one.
The Account and CreateAccount modules are standalone and lazy loaded in the routes.ts file.
export const routes: Array<Route> = [
{ path: '', component: WelcomeComponent, pathMatch: 'full'},
{ path: ':name', loadChildren: './account/account.module#AccountModule' },
{ path: 'create-account', loadChildren: './create-account/create-account.module#CreateAccountModule', pathMatch: 'full'},
{ path: '**', redirectTo: ''}
];
To view your account, you need to enter your username and then you'll be directed to an overview of your account. The URL should look like this:
https://baseurl.com/*accountName*/*someView*The routes for the Account module are as follows:
export const routes: Array<Route> = [
{ path: '', component: AccountComponent, canActivateChild: [AccountGuardService], children: [
{ path: '', component: OverviewComponent },
{ path: 'transfer', component: TransferComponent, canActivate: [DeletedGuardService] },
{ path: 'voting', component: VotingComponent, canActivate: [DeletedGuardService] },
{ path: 'vesting', component: VestingComponent, canActivate: [DeletedGuardService] }
] },
]
If you want to create a new account, you can do so as a 'logged in' user and have full control over your child accounts or create a new one. The difference lies in the URL parameter:
https://baseurl.com/create-account/*accountName*https://baseurl.com/create-accountThe CreateAccount component acts as a wizard using @ngrx/store for navigation. The AccountName URL parameter specifies the starting point in the wizard.
The routes for the CreateAccount module are:
export const routes: Array<Route> = [
{ path: '', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService] },
{ path: ':account', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService] },
];
Prior to refactoring the project to use lazy loaded modules, everything worked fine. However, with this configuration, no matter what URL I use, I'm always redirected to the root and the CreateAccountComponent is displayed.
https://baseurl.com/*accountName*https://baseurl.com/
https://baseurl.com/*accountName*/transferhttps://baseurl.com/
https://baseurl.com/create-accounthttps://baseurl.com/
https://baseurl.com/create-account/*accountName*https://baseurl.com/
How can I differentiate between the literal route create-account and the parameterized route :name? Using pathMatch: full in various places hasn't helped. My understanding of routing still needs improvement.
This is how the route looked before refactoring:
export const routes: Array<Route> = [
{ path: '', component: WelcomeComponent, pathMatch: 'full'},
{ path: 'create-account', component: CreateAccountComponent, canDeactivate: [CreateAccountGuardService], pathMatch: 'full' },
{ path: 'create-account/:account', component: CreateAccountComponent, pathMatch: 'full', canDeactivate: [CreateAccountGuardService] },
{ path: ':name', component: AccountComponent, canActivateChild: [AccountGuardService], children: [
{ path: '', component: OverviewComponent },
{ path: 'transfer', component: TransferComponent, canActivate: [DeletedGuardService] },
{ path: 'voting', component: VotingComponent, canActivate: [DeletedGuardService] },
{ path: 'vesting', component: VestingComponent, canActivate: [DeletedGuardService] }
] },
{ path: '**', redirectTo: ''}
];
EDIT: The cause of the problem was found in Routes.Module.ts. I forgot to remove a module that is no longer imported but rather lazy-loaded (CreateAccountModule).
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
import { CreateAccountModule } from './create-account/create-account.module';
import { routes } from './routes';
import { WalletComponent } from './wallet/wallet.component';
@NgModule({
imports: [
SharedModule,
/*CreateAccountModule - removing this import fixes the problem with routing override. Routing now works. */
RouterModule.forRoot(routes),
],
declarations: [
WalletComponent,
],
exports: [
RouterModule
]
})
export class RoutesModule { }