Question

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

Google Chrome console errors

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

Firefox console errors

任何想法会导致什么？我正在运行角度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 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

这对我来说很明显。您是否阅读了该错误消息？您应该拆分一些东西，但它不存在->未定义。就像您要从数组中删除未定义的内容一样。无法读取未定义的属性“ split”。不要惊慌，不要奔跑。慢慢来检查该字符串或您要拆分的任何内容。

Answer 2

找到了答案，问题不出在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 3

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

测试生产版本时出现角度应用路由错误

3 个答案: