After update angular version 8 to 11, app is not running

Question

I have an Angular app version update from 8 to 11. This router is not working after the update. Show blank page when application is run. There is no error in the compilation and browser consoles. How to solve the problem?

export const AppRoutes : Routes = [
{ path: 'login', component: LoginPageComponent }
{ path: '', component: MainComponent},
{ path: '', component: MainComponent, children: [
    { path: 'test-one', loadChildren: () => import('./TestOne/TestOne.module').then(m => m.TestOneModule)},
    { path: 'test-two', loadChildren: () => import('./TestTwo/TestTwo.module').then(m => m.TestTwoModule), canActivate: [AuthGuard], runGuardsAndResolvers: 'always'}
]},
{ path: ':pageslug', component : MainComponent },
{ path: '**', component : MainComponent }

];

Answer 1

There are some breaking changes concerning router in Angular 11 as follows:

router: * The initialNavigation property for the options in RouterModule.forRoot no longer supports legacy_disabled, legacy_enabled, true, or false as valid values. legacy_enabled (the old default) is instead enabledNonBlocking enabled is deprecated as a valid value for the RouterModule.forRoot initialNavigation option. enabledBlocking has been introduced to replace it router: preserveQueryParams has been removed, use queryParamsHandling=”preserve” instead router: If you were accessing the RouterLink values of queryParams, fragment or queryParamsHandling you might need to relax the typing to also accept undefined and null. (#39151)

Pls see : https://medium.com/swlh/angular-11-in-depth-9a7372b4a600