无法路由到 Angular 13 应用程序中的任何组件答案

【问题标题】：Unable to route to any component in Angular 13 application无法路由到 Angular 13 应用程序中的任何组件
【发布时间】：2022-08-12 00:54:22
【问题描述】：

我目前正在构建一个项目，我决定让它比我最初的范围更大。我将一些现有组件移动到一个名为 UserModule 的新模块中，现在一旦我为应用程序提供服务，实际上并没有加载任何页面。

我总共有 2 个附加模块（UserModule 和 AuthModule），它们也有各自的路由模块，然后是原始的 AppModule（我还将路由部分移出到它自己的文件中）。

在这里，我导入了其他模块和它自己的 AppRoutingModule

应用模块：

@NgModule({
declarations: [
 AppComponent,
 HeaderComponent,
 RecipesContainerComponent,
 RecipeDisplayCardComponent,
 MainComponent,
 RecipeComponent,
 ViewRecipeComponent,
],

imports: [
 BrowserModule,
 AppRoutingModule,
 AuthModule,
 UserModule,
 ReactiveFormsModule,
 provideFirebaseApp(() => initializeApp(environment.firebase)),
 provideAuth(() => getAuth()),
 provideFirestore(() => getFirestore()),
 BrowserAnimationsModule,
],

exports: [RouterModule, ReactiveFormsModule],
providers: [RecipeService],
bootstrap: [AppComponent],
})

  export class AppModule {}

应用路由模块

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo([\'\']);

let routes: Routes = [
{
    path: \'main\',
    component: MainComponent,
children: [
  {
    path: \'\',
    component: RecipesContainerComponent,
  },
  {
    path: \'recipe\',
    component: RecipeComponent,
  },
  {
    path: \'recipe-list\',
    component: RecipesContainerComponent,
  },
  {
    path: \'recipe/:id\',
    component: RecipeComponent,
  },
  {
    path: \'view-recipe/:id\',
    component: ViewRecipeComponent,
  },
],
...canActivate(redirectUnauthorizedToLogin),
},
{
path: \'**\',
redirectTo: \'\',
pathMatch: \'full\',
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})

export class AppRoutingModule {}

授权模块：

@NgModule({
declarations: [
LoginFormComponent,
LoginPageComponent,
RegisterPageComponent,
ForgetPasswordComponent,
],
imports: [CommonModule, AuthRoutingModule, ReactiveFormsModule, FormsModule],
providers: [AuthService],
})

export class AuthModule {}

认证路由模块：

const redirectLoggedInToHome = () => redirectLoggedInTo([\'main\']);

const routes: Routes = [
{
  path: \'\',
  component: LoginPageComponent,
  ...canActivate(redirectLoggedInToHome),
},
{
  path: \'login\',
  component: LoginPageComponent,
},
{
  path: \'register\',
  component: RegisterPageComponent,
},
{
  path: \'forget-password\',
  component: ForgetPasswordComponent,
},
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})

export class AuthRoutingModule {}

用户模块：

@NgModule({
declarations: [DiscoverComponent, ProfileHeaderComponent],
imports: [CommonModule, UserRoutingModule],
exports: [DiscoverComponent, ProfileHeaderComponent],
}) 

export class UserModule {}

用户路由模块：

const routes: Routes = [
{
  path: \'discover\',
  component: DiscoverComponent,
},
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})

export class UserRoutingModule {}

我从 UserModule 中导出将在其他模块中使用的组件。

一旦我为应用程序提供服务，浏览器中的 url 响应是：

http://localhost:4200/

如果我手动输入路径，它会一直显示相同

http://localhost:4200/

此外，我已经移除了两个警卫，他们没有改变任何东西，所以这也不是问题。任何帮助表示赞赏。

标签： angular angular-ui-router angular2-routing

【解决方案1】：

appRoutingModule 模块是应用程序的开始，因为您定义的根目录包含路径 main 这就是问题所在。因此，您需要将其更改为。

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['']);

let routes: Routes = [
{
    path: '',
    component: MainComponent,
children: [
  {
    path: '',
    component: RecipesContainerComponent,
  },
 // rest of the code

这不会完全解决您的问题，但黑屏是由于这个原因造成的！

【讨论】：