Angular 测试生产构建时出现角度应用程序路由错误

使用

ng build--prod

和

ng serve--prod

测试我的应用程序生产版本在chrome上出现以下错误：

Firefox在控制台中提供了一些不同的输出：

知道是什么引起的吗？我跑了8英里

然后用简单的ng服务测试应用程序，一切看起来都很好，只有在生产完成后控制台才会出现错误。错误仍然存在，然后应用程序也被托管在服务器中。告诉我是否需要提供有关我的应用程序的更多信息

这是我的app.routing.ts文件：

export const AppRoutes: Routes = [
  {
    path: '',
    component: FrontendPanelLayoutComponent,
    loadChildren: () => import('./pages/pages.module').then(mod => mod.PagesModule)
  }
];

和pages.routing.ts：

export const PagesRoutes: Routes = [
  {
    path: pages.Home,
    component: LandingComponent
  },
  {
    path: pages.Products,
    component: ProductsComponent
  },
  {
    path: pages.Products + '/:category',
    component: ProductsListComponent
  },
  {
    path: pages.Products + '/:category/:product',
    component: ProductsViewComponent
  },
  {
    path: pages.Services,
    component: ServicesComponent
  },
  {
    path: pages.Services + '/:service',
    component: ProductsViewComponent
  },
  {
    path: pages.About,
    component: AboutUsComponent
  },
  {
    path: pages.Contacts,
    component: ContactsComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: pages.Home
  }
];

这是导致错误的原因，但其在node_modules router.js文件中不是我的代码。奇怪的是，为什么这些错误只出现在

ng build--prod

之后，

ng service

没有显示任何问题

function defaultUrlMatcher(segments, segmentGroup, route) {
    var parts = route.path.split('/');
    if (parts.length > segments.length) {
        // The actual URL is shorter than the config, no match
        return null;
    }
    if (route.pathMatch === 'full' &&
        (segmentGroup.hasChildren() || parts.length < segments.length)) {
        // The config is longer than the actual URL but we are looking for a full match, return null
        return null;
    }
    var posParams = {};
    // Check each config part against the actual URL
    for (var index = 0; index < parts.length; index++) {
        var part = parts[index];
        var segment = segments[index];
        var isParameter = part.startsWith(':');
        if (isParameter) {
            posParams[part.substring(1)] = segment;
        }
        else if (part !== segment.path) {
            // The actual URL part does not match the config, no match
            return null;
        }
    }
    return { consumed: segments.slice(0, parts.length), posParams: posParams };
}

函数defaultUrlMatcher（段、段组、路由）{
var parts=route.path.split（'/'）；
如果（parts.length>segments.length）{
//实际URL比配置短，不匹配
返回null；
}
如果（route.pathMatch==='full'&&
（segmentGroup.hasChildren（）| | parts.length

这对我来说非常明显。你看到那个错误消息了吗？应该有要拆分的内容，但它不存在->未定义。例如，如果要从数组中删除未定义的内容。

---

无法读取未定义的属性“拆分…”。。。。集中注意力，读下面的信息。不要惊慌，不要跑。慢慢地。检查该字符串或任何要拆分的内容。

找到了答案，问题不在router.js文件中，而是在我的路由文件中。我只是用没有引用的简单字符串更改了所有路径，现在它正在工作。多谢各位

export const PagesRoutes: Routes = [
  {
    path: 'home',
    component: LandingComponent
  },
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'products/:category',
    component: ProductsListComponent
  },
  {
    path: 'products/:category/:product',
    component: ProductsViewComponent
  },
  {
    path: 'services',
    component: ServicesComponent
  },
  {
    path: 'services/:service',
    component: ProductsViewComponent
  },
  {
    path: 'about',
    component: AboutUsComponent
  },
  {
    path: 'contacts',
    component: ContactsComponent
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: pages.Home
  }
];

---

当我试图为生产进行构建时，我也面临着同样的问题。我的问题也是一样，我使用了一些其他文件（app route.constant.ts）来维护路由，然后将该文件引用到app-routing.module.ts。它似乎不起作用

app-route.contant.ts

const path ={
  paths: {
accessDenied: `access-denied`,
leadershipstacked: {
  path: `leadership-stacked`,
  routeChildren: {},
},}

app-routing.module.ts

    const routes: Routes = [

  {
    path: `${appRoute.path.leadershipstacked}`,
    loadChildren: () =>
      import('./leadership/leadership.module').then((m) => m.LeadershipModule),
  }
]

然后，我尝试直接在app-routing.module.ts文件中提及路径，它工作正常

const routes: Routes = [
    
      {
        path: 'PMO/:projectID/leadership',
        loadChildren: () =>
          import('./leadership/leadership.module').then((m) => m.LeadershipModule),
      }
    ]

---

@GreybearedGeek是的，但是router.js.pre-build-optimizer来自节点模块，这是模块本身的问题吗？您好@Cooper。请共享您的应用程序路由文件。看起来那里好像出了什么问题。@Damiant更新了！您可以更改为延迟加载路由的新语法：@damiant将app.routing.ts更新为延迟加载，但错误仍然存在，还有其他想法吗？我理解，但它让我感到困惑，它来自节点模块，而不是我编写的代码。哦。好的。只是想帮忙。这很有意思。当然这个问题是由router.js引起的，我99%肯定是由框架引起的，但它可能是由于项目或路由的错误配置造成的。进一步挖掘的唯一方法是找出它试图对您的路由/url字符串做什么。请使用任何相关信息更新您的问题，并避免在评论中发布代码。1）可以删除帖子，隐藏评论2）评论中的代码很难阅读。谢谢这也是我在AoT中使用角度路由时遇到的一个障碍。我必须从路由配置中删除对模块或名称空间中的值的所有引用。