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

Question

使用 ng build --prod 和 ng serve --prod 测试我的应用程序生产版本我在 chrome 上遇到这些错误：

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

任何想法可能导致它？我正在运行角度 8。

然后使用简单的 ng serve 测试应用程序看起来一切正常，只有在生产后控制台中没有错误。错误仍然存​​在，然后应用程序也托管在服务器中。告诉我是否需要提供有关我的应用的更多信息。

这是我的 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 serve没有显示任何问题。

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 };
}

Answer 1

找到了答案，问题不在 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
  }
];

Answer 2

当我尝试为生产进行构建时，我也面临同样的问题。我的问题是一样的，我正在使用其他一些文件（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),
      }
    ]

Answer 3

这对我来说非常明显。你读过那个错误信息吗？应该有一些你想要拆分的东西，但它不存在 -> 未定义。就像您想从数组中删除未定义的内容一样。 无法读取未定义的属性“拆分”...。关注此内容并阅读消息。不要惊慌，不要逃跑。慢慢地。检查该字符串或您要拆分的任何内容。