Upgraded 13 to 14- - router.navigate doesn't work anymore-CodePudding

After upgrading our code base from Angular 13 to Angular 14 routing no longer works. The problem is here in our code on the last line - router.navigate. We've had the code like this for several years and it hasn't been touched in a long while. I thought maybe Angular 14 was going strict and wanted the path to be a string array so I tried that and that did not work either. I switched the code base back to Angular 13 and the problem goes away and routing returns to normal:

private RouteLink() {
const mii: number =  this.menuUrl.split("/")[2];
if (isNaN(mii)) {
  this.menuService.LandingLinkClicked( this.menuItemId);
} else {
  this.menuService.LandingLinkClicked(mii);
}
this.router.navigate([this.menuUrl]);  }

The error message we are getting is:

NG04014: Invalid configuration of route 'applications//'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren

Error: NG04014: Invalid configuration of route 'applications//'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren

I've checked all of the routes and they are set according to the latest documentation on the Angular site. We have the routes broken up across the code base starting with app-routing module at the top. The code here sends the router to the applications-routing module.

 {
    path: "applications",
    loadChildren: () =>
      import("./applications/applications.module").then(
        (m) => m.ApplicationsModule
      ),
  },

The applications routing module sends the router to cpl which is the Customer Service Center Phone List.

 {
    path: "cpl",
    canActivate: [MenuGuard],
    loadChildren: () =>
      import("./csc-phone-list/csc-phone-list.module").then(
        (m) => m.CscPhoneListModule
      ),
  },

Finally the Csc Phone List routing module is called:

{
    path: "pea",
    canActivate: [MenuGuard],
    component: PhoneListExtensionsComponent,
  },

This is just an example but all of the routes don't work, not just this one. It all starts with router.navigate. Yes, I have split the string into an array and provided that to the navigate method as mentioned before. Then I figured maybe Angular 14 doesn't like these feature router modules anymore, so I combined one complete route into the app-router.module and just got another error that didn't make any sense. As you can see the routes are using the new 'import' statement per the Angular documentation. This methodology of routing has been working for us for several years and we have a lot of applications in our portal system. The only change is the upgrade to 14. Any thoughts on this?

CodePudding user response：

Take a look at the Angular Router Breaking Changes since Angular 14. For example, i had to add pathMatch to all my routing rules.

Router Breaking Changes since Angular 14

CodePudding user response：

Check if you have somewhere in the routes an entry which has none of component, loadComponent, redirectTo, children or loadChildren. (in all routing modules)