Routeur angulaire 4: la navigation directe du navigateur redémarre l'application

Question

Lorsque j'utilise le navigateur pour naviguer directement vers un itinéraire, l'application se réenroule et me dirige vers la page/le composant correct. Lorsque je navigue à travers un bouton par exemple, il me prend directement là sans re-bootstrap l'application.

Est-ce que ce comportement est attendu? Comment puis-je empêcher cela?

Le problème est que nous utilisons le serveur d'identité pour notre authentification. Il nécessite une URL de rappel, qui est traitée comme une navigation directe dans le navigateur et les réamorçages de l'application.

Notre app-routing.module ressemble à ceci:

const routes: Routes = [ 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent, canActivate: [RouteGuardService] }, 
    { path: 'users', component: UsersMainComponent}, 
    { path: 'vendors', component: VendorMainComponent}, 
    { path: 'invoices', component: InvoicesMainComponent}, 
    { path: 'offers' , component: EsdMainComponent}, 
    { path: 'settings' , component: SettingsMainComponent}, 
    { path: 'callback' , component: CallbackComponent}, 
    { path: 'createvendor' , component: CreateVendorsComponent, canActivate: [RouteGuardService]}, 
    { path: 'customerdashboard' , component: CustomerDashboardComponent}, 
]; 

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

Le chemin de rappel est l'URL de rappel pour le serveur d'identité.

Answer 1

Oui, c'est le comportement attendu. Lorsque vous utilisez un bouton dans votre application Angular, vous utilisez simplement pushState pour modifier l'historique as described in the docs (en bas). Lorsque vous effectuez une navigation directe, vous allez chercher index.html, qui va démarrer l'application, puis l'application utilisera l'URL actuelle pour déterminer le ou les composants à afficher.

The answer to this question couvre, espérons-le, comment résoudre votre problème.