Route Paramater causes wrong app root url

Question

In app.routing.ts I have added a route with parameters

  {
    path: 'manager-branch/:id',
    loadChildren: './components/manager/manager-branch/manager-branch.module#ManagerBranchModule'
  }

Everything works fine If I browse to it through the application, however if I refresh page while being on that component, my application root url will be wrong and page will fail to load.

For instance, my application root url is http://localhost:4200

If I refresh my page while being on any other component which doesn't have routing parameter, it will work fine.

If I refresh my page while on http://localhost:4200/manager-branch/1 it will fail to load.

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4200/manager-branch/assets/css/font-awesome.min.css

You can see that app url is not correct. There shouldn't be manager-branch in it.

Here's manager.branch.module.ts

@NgModule({
    imports: [
        ManagerBranchRoutingModule,
        CommonModule,
        Ng2BootstrapModule,
        ModalModule.forRoot(),
        FormsModule
    ],
    declarations: [
        ManagerBranchComponent,
        ManagerEmployeeComponent,
        EmployeeProfileComponent,
        ManagerTransactionsComponent,
        EmployeeTransactionsComponent,
    ]
})
export class ManagerBranchModule {}

The problem is in my app.module.ts

useClass: PathLocationStrategy

it works fine with HashLocationStrategy, but I have to stick with Path

ebduhon ebduhon · Accepted Answer · 2017-11-27T01:58:46

The issue is related to the routes configuration evaluation behavior of the Angular Router specific to lazily loading the module by its symbol ManagerBranchModule. The application accessed from http://localhost:4200 works fine because the first match evaluated by the angular router is the the default empty path such as: "{ path: '' component: AppComponent }". The evaluation behavior of the Angular Router by default automatically matches route config empty string "", then routing is complete. If the Angular Router doesn't find any route configuration matches the pattern matching behavior "backtracks" during pattern matching of routes. Directly "refreshing" the application initializing loading of the app at http://localhost:4200/manager-branch/1 fails because the lazily loaded module likely does not have a corresponding manager-branch-routing.module with an empty path, or path to support the ":id" parameter in the route configuration. The "backtracking" behavior looks for the route configuration i.e., "{ path: "manager-branch/:id", ...}" in app-routing.module and it won't evaluate and matches in the route configuration resulting in errors.

Another issue is that you can't initialize and load an application of a lazily loaded module because a key aspect of the behavior of the Angular Router is the behavior that is evaluated as a result of matching should not affect the behavior of pattern matching of the route; this is by design; in other words, initializing an app at a route defined in the route configuration for a lazily loaded module is not supported. Alternatively, look at the Angular Documentation on Custom Preloading Strategies. Also, see this other Angular Router answer as it goes into further detail regarding behavior of the router and example scenarios in the context of multiple named router outlets, note the empty path that is the top-level route for the lazily loaded module route configuration.

Here is an untested example configuration that may help resolve your issue:

// app-routing.module

const routes: Routes = [
  { path: '', component: AppComponent },
  { 
    path: 'manager-branch', 
    loadChildren: 'manager-branch/manager-branch.module#ManagerBranchModule' 
  }
];

// manager-branch-routing.module
const managerBranchRoutes: Routes = [
  {
    path: '',
    component: ManagerBranchContainerComponent, canActivate: [ ManagerBranchAuthGuardService ],
    children: [
      { path: '', canActivateChild: [ ManagerBranchAuthGuardService ],
        children: [
          { path: '', redirectTo: 'dashboard' },
          { path: 'dashboard', component: ManagerBranchDashboardComponent },
          { path: ':id', component: ManagerBranchDashboardComponent }
        ] },
    ] }
];

Route Paramater causes wrong app root url

1 Answers