错误：路由“”配置无效。必须提供以下其中一项：组件、redirectTo、children 或 loadChildren

Question

我正在根据运行良好的条件设置“ ”路径，并设置到“ ”路径的路由。我在我的开发服务器上工作得很好。但是当我构建项目并在生产服务器上运行它时，它给了我这个错误。

未捕获错误：路由“ ”配置无效。必须提供以下其中一项：组件、redirectTo、children 或 loadChildren

这是我的app-routing.module.ts

const fallback: Route = {
  path: '**',
  component: NotFoundComponent
}

var   home: Route = {};

const hostName = window.location.host;
console.log('hostName: ', hostName);
var workspaceName = hostName.split('.')[0];
console.log('workspaceName: ', workspaceName);

if (workspaceName === 'peprix' || workspaceName === 'www') {
  console.log("if");
  let homeRoute: Route = {
    path: '', component: MainComponent
  }
  home = homeRoute;
} else {
  console.log("else");
  let homeRoute: Route = {
    path: '', canActivate: [SessionGuard], data: { workspaceName: workspaceName }, resolve: { workspaceId: SigninService }, component: SigninNextComponent
  }
  home = homeRoute;
}

const routes: Routes = [
  home,
  { path: 'signin', canActivate: [SessionGuard], component: SigninComponent, data: { workspaceName: workspaceName } },
  { path: 'create-workspace', canActivate: [SessionGuard], component: CreateWorkspaceComponent },
  { path: 'projects', canActivate: [ProjectGuard], component: ProjectComponent },
  { path: 'password-reset', component: PasswordResetComponent },
  { path: 'new-password', component: NewPasswordComponent },
  fallback
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    ProjectDetailsService,
    SigninService
  ]
})
export class AppRoutingModule { }

P.S：我已经导入了所有组件和依赖项，所以这里不是问题。

Answer 1

我想这就是

Angular

生产模式下包装优化的结果。

请先看一下这个测试。

当我尝试以下代码时，结果是相同的：

 - 错误：

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

var home: Route = {};

// No matter what you do later, it is invalid.
// The variable home assigned to routes is unchanged.
Home.path = '';
Home.component = HomeComponent;

// result: home = {}
// so error
const routes: Routes = [home];

 - 右

const home: Route = {
    path: '',
    component: HomeComponent
}

最后，为了解决您的问题，您可以这样做：

// Define them first
// MainComponent
const home: Route = {
    path: '',
    component: MainComponent
};

// SigninNextComponent
const home2: Route = {
    path: '',
    component: SigninNextComponent
}

// Your judgment parameters
const hostName = window.location.host;
var workspaceName = hostName.split('.')[0];

// Judge written here
const routes: Routes = [
    workspaceName === 'peprix' || workspaceName === 'www' ? home : home2,
    Fallback
];

Answer 2

如果您将空对象

{}

作为路由的一部分传递，那么这也会导致上述错误。

因此，如果出于某种原因您需要在项目中保留空路由作为占位符，您可以像这样过滤掉它们：

// foo-routing.module.ts
//
// import your routes here

const allRoutes: Routes[] = [
  // your routes
];

const filteredRoutes: Routes = allRoutes.reduce((accumulator, routeArray) => {
  const allObjectsConform = routeArray.every(route => Object.keys(route).length > 0);
  if (allObjectsConform) {
    return [...accumulator, ...routeArray];
  }
  return accumulator;
}, [] as Routes);


const routes: Routes = [
  ...filteredRoutes,
  
  // routes you want to define at the top level
  // ...
];

由于每个路由都是一个对象数组，因此您必须测试数组中的每个对象以检查它是否没有键（换句话说，它是否为空。）

此代码不会过滤掉无效的路由对象，即具有错误键和值的路由对象。