Bdtjtk

This stackblitz demo should not render because of the :id path variable in the route to the guarded HelloComponent.

{ path: ':id', component: HelloComponent, canActivate: [AuthGuard] },

{ path: '', component: CollectionPageComponent, canActivate: [AuthGuard] }];

If :id is removed, then the login view renders, since both paths will be guarded, but if the :id variable is added back to the path, the demo spins forever.

Is this a bug or am I violating some router principle by adding :id to this location?

Note that I replaced the ViewBook component with a HelloComponent just for trouble shooting purposes. The books module is lazy and the way that this is supposed to work is that if the user authenticates and selects a book in search the book can be shown with the path books/4545342, which would trigger the :id path, but if just books is requested, without a path parameter then the book collection is shown.

I'm using this demo as a reference point. Is uses a essentially the same routing configuration.

I tried flipping the path parameters here. It seems in older versions of Angular the order does not matter, but now it does.

Filed a bug report here

When using the router, you have to be careful where you import modules. Ideally, you won't import a lazy loaded module in your application anywhere.

In your case, you're importing the book module into your app module. This adds the routes to the router config at the root level. The router does fancy unknown-to-me things with lazy loaded modules. Routes that cannot be activated won't be added to the config.

See new config after removing book module from app module:

0: {path: "login", component: ƒ}

1: {path: "", redirectTo: "books", pathMatch: "full"}

2: {path: "books", loadChildren: ƒ, _loadedConfig: LoadedRouterConfig}

3: {path: "**", component: ƒ}

VS before the move:

0: {path: ":id", component: ƒ}

1: {path: "", component: ƒ}

2: {path: "login", component: ƒ}

3: {path: "", redirectTo: "books", pathMatch: "full"}

4: {path: "books", loadChildren: ƒ, _loadedConfig: LoadedRouterConfig}

5: {path: "**", component: ƒ}

To fix: simply don't import your book module in the app module. In your case, you'll need to import the HttpClientModule in your book module.

Try this, pay attention I change the order, and added pathMatch to '' route,

{ path: '', component: CollectionPageComponent, pathMatch: 'full', canActivate: [AuthGuard] },

{ path: ':id', component: HelloComponent, canActivate: [AuthGuard] },

• if the issue is not solved let me know to delete my answer