Project Structure:
I have a project with 4 different apps wrapped in a folder in the following structure:
apps
|
|+-- dashboard
| |+-- app.module.ts
| |
| |+-- app.routes.ts
| |
| |+-- *folders containing other various components to route to*
|
|+-- dev
| |+-- dev.module.ts
| |
| |+-- dev.routes.ts
| |
| |+-- *folders containing other various components to route to*
|
|+-- kitchen
| |+-- kitchen.module.ts
| |
| |+-- kitchen.routes.ts
| |
| |+-- *folders containing other various components to route to*
|
|+-- support
| |+-- support.module.ts
| |
| |+-- support.routes.ts
| |
| |+-- *folders containing other various components to route to*
+
The main way that this issue differes from the other posts I have seen on StackOverflow is that there is no wrapper containing all the routes, all the apps are individual. When I want to run all the apps, I run the npm command:
nx run-many --target=build --projects=dashboard,support,kitchen,dev --watch --skip-nx-cache .
This is intentional as we have different sidebars / permissions / etc. for each application.
Main Issues:
If I am on the main app page, the dashboard component, I am able to route to '/developer'. However, if I try to route to '/developer/server-stats' for example, the route is unable to be found.
If I am on a developer page besides '/developer', such as 'developer/server-stats' and the page reloads, then the route is unable to be found.
If try searching for a developer page besides '/developer', such as 'developer/server-stats' and the page reloads, then the route is unable to be found.
A very important detail:
It is very important to note that this is working on our production and staging versions. This means that its possible that there is some way that routes get built / loaded that differs depending on certain configuration settings, and it's very possible that I need to adjust something there.
File Details:
For simplicity's sake, I will just show the modules for App and Dev, to reduce the amount shown. The fix should as well:
App Module:
@NgModule({
declarations: [
AppComponent
],
providers: [
EventService,
AnchorService,
OrganizationService,
LandingPageResolver,
{ provide: APP_BASE_HREF, useValue: '/' }
],
imports: [
CoreModule,
BreadcrumbsModule,
AppRoutingModule,
// Loaded after AppRoutingModule so that we don't route to not-found on accident
WildCardRoutingModule
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
Dev Module:
@NgModule({
declarations: [
DevComponent
],
imports: [
CoreModule,
DevRoutingModule,
WildCardRoutingModule, // <--- needs to be imported AFTER DevRoutingModule
],
providers: [ChannelResource, ChannelService, ProbeUpdateService, ProbeUpdateResource, EnvironmentService, { provide: APP_BASE_HREF, useValue: '/' }],
bootstrap: [DevComponent]
})
export class DevModule { }
App Routing:
export const DashboardRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/dashboard' },
{
/**
* To make dashboard and its children load in the same router-outlet
* we need to set path as dashboard on this base route and add the actual dashboard route in the children
*/
path: 'dashboard',
canActivateChild: [AuthGuard],
data: {
label: 'Dashboard',
appBase: true
},
children: [
// this is a child so we can load the component in same router-outlet
{
path: '',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
data: {
authorizedRoles: ['member', 'support'],
label: 'Dashboard',
},
},
{
path: 'insight',
loadChildren: () => import('./insight-manager/insight-manager.module').then(m => m.InsightManagerModule),
data: {
authorizedRoles: ['member', 'support']
}
}
]
}
];
@NgModule({
imports: [ RouterModule.forChild(DashboardRoutes) ],
providers: [ AuthGuard, TourCanDeactivateGuard, TourResolver, TimespanResolver],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Dev Routing:
export const DeveloperRoutes: Route = {
path: 'developer',
data: {
label: 'Developer',
appBase: true,
authorizedRoles: ['developer']
},
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'server-stats'
},
{
path: 'server-stats',
loadChildren: () => import('./server-stats/server-stats.module').then(m => m.ServerStatsModule),
data: { label: 'Server Stats', authorizedRoles: ['developer'] }
},
{
path: 'member-management',
loadChildren: () => import('./member-management/member-management.module').then(m => m.MemberManagementModule),
data: { label: 'Member Management', authorizedRoles: ['developer'] }
}
],
};
Changes I have tried and documented:
App component
- Change: Added a sidebar route for '/developer/server-stats'
- Purpose: Test that routing to something besides '/developer' always breaks, not just when using search bar/other links.
- Result: Routing failed, as expected, as we were routing to something besides '/developer'
Notes on this component: Good for testing new routes, but nothing here will likely be needed for the fix.
App module:
- Change: Added DevRoutingModule to imports.
- Purpose: Test the result of ensuring that all developer routes are defined at the point that the app is loaded.
- Result: Routing to all developer pages worked, but was done within the dashboard app (app-component) instead of the developer app (dev-component), which caused the sidebar to be off, and is just an overall incorrect fix.
Notes on this component: It seems unlikely that the fix is to add to the App Module inports. We need a developer route to be defined at the point that we are on the Dashboard, but adding it here results in staying on the dashboard app when trying to route outside of it.
App routing
- Change: Changed DashboardRoutes to contain
...DeveloperRoutes. - Purpose: Test the result of ensuring that all developer routes are defined at the point that the app is loaded.
- Result: Routing to all developer pages worked, but was done within the dashboard app (app-component) instead of the developer app (dev-component), which caused the sidebar to be off, and is just an overall incorrect fix.
- Change: Changed DashboardRoutes to contain a path for 'developer'. { path: 'developer', data: { label: 'Developer', appBase: true, authorizedRoles: ['developer'] }, loadChildren: () => import('{respective path here}').then(m => m.DeveloperRoutes), // Also tried with DevModule and DevRoutingModule }
- Purpose: Try and set a definition for each developer route that will redirect to the developer version.
- Result: Various errors including redefined modules & routes not found.
Notes on this component: It seems unlikely that the fix is to add to the DashboardRoutes. We need a route defined at the point that we are on the Dashboard, but adding it here results in staying on the dashboard app when trying to route outside of it.
Sidebar route component
- Change: Set routerLinkActiveOptions.exact to false rather than true.
- Purpose: Try and see if the route is defined somewhere under '/dashboard' but can't be accessed because it is searching for an exact link.
- Result: Route was still not found.
- Change: Remove [interAppLink] from the link
- Purpose: Test that [interAppLink] is necessary and working on the sidebar-route component.
- Result: interApp routing broke (interAppLink is necessary and working).
Notes On this Component: These routes seem to be working correctly, when they have a route that they have access to, they are able to route to it correctly. Whether it is in a different app or not. The fix is likely not here.
Dev routing
- Change: Tried adding a loadChildren value to DeveloperRoutes
- Purpose: see if it is possible that children get loaded later when they need to be loaded at the time that the dev routing modules is loaded.
- Result: Cannot have loadChildren if you are defining a static children array.
- Additional Notes: Could further investigate this by creating A DevAppRoutingModule that wraps the current DevRoutingModule so that our implementation can better match the AppRouting module.
- Change: Changed DeveloperRoutes to have a route, { path: '', pathMatch: 'full', redirectTo: '/developer' }.
- Purpose: Test if there was possibly some way that we were routing to '', rerouting to '/dashboard', then not finding the children.
- Result: Everything functioned the same, not the fix.
- Change: appBase: true to data in DeveloperRoutes
- Purpose: Test if '/developer' was just getting defined as a route and not an appBase, resulting in the children not being able to be found correctly
- Result: Didn't fix, but feels like it should still be set here, as app routes is doing it and it seems to make intuitive sense, would be worth looking more into.
Notes On This Component: It's definitely possible there is more to be explored here. This is where a lot of the routing we are looking for is created, it just isn't accessible to app for some reason, and the interLinkApp is unable to find them correctly, so it is routing to the W
Wildcard routing
- Change: Removed the wildcard path ('**')
- Purpose: Determine if the developer routes were being overridden by a wildcard route.
- Result: Routing to 'developer/server-stats' resulted in the path being unable to be found, giving console error and just routing to localhost
Notes on this component: Almost certainly nothing here needs changed for the fix.