lazyload 模块在 Angular 14 升级后未加载

Question

上周，我将应用程序升级到 Angular 14，并添加了一些其他路由，例如 'scenarion/:id' 。从那时起，我收到以下错误，并且不确定它在问什么。我尝试在重定向路径的任何地方添加“前缀：”full”属性，但没有用。

Error: Uncaught (in promise): Error: NG04014: Invalid configuration of route '{path: "projects/:projectId/alternative/:fdaId/economics/scenario/:id/", redirectTo: "production-input"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.

Angular库模块中的路由配置： 项目/economics-core/src/lib/economics-core-routing.module.ts

export const routes: Routes = [
  {
    path: 'economics',
    component: ScenariosComponent
  },
  {
    path: '',
    pathMatch:'full',
    redirectTo: '/economics'
  },
  {
    path: 'global-parameters',
    component: GlobalparamComponent,
  },
  {
    path: 'scenario/:id',
    component: DetailComponent,
    children: [
      {
        path: '',
        redirectTo: 'production-input',
        pathMatch:'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: 'production-input',
        component: ProductionInputComponent
      },
      {
        path: 'cost-input',
        component: CostInputComponent
      }

    ]
  },
  {
    path: '**',
    component: ScenariosComponent
  }
];

主应用程序中的路由配置

const routes: Routes = [
    {
        path: 'projects',
        component: ProjectListContentComponent
    },
    {
        path: 'projects/:projectId',
        component: ProjectDetailsContentComponent
    },
    {
        path: 'projects/:projectId/alternative/:fdaId/economics',
        loadChildren: () =>
            import('../../../../../../node_modules/@fdp/economics-core').then((m) => {
                return m.EconomicsCoreModule;
            })
    },

];

点击后，导航至经济学

navigateToEconomicsDashboard() {
        console.log(this.route);
        this.router.navigate([`alternative/${this.alternative.fdaId}/economics`], {
            relativeTo: this.route,
        });
    }

有人可以帮我吗？

Answer 1

将 pathMatch: 'full' 添加到有问题的路线。

就像您的代码中的以下内容：

{
    path: 'scenario/:id',
    component: DetailComponent,
    children: [
        {
            path: '',
            redirectTo: 'production-input',
            pathMatch: 'full'
        },
        // ... other child routes
    ]
},

尝试一下，如果您遇到任何错误，请告诉我。