Angular路由器将所有路由器重定向到空白页面答案

【问题标题】：Angular router redirects all router to blank pageAngular路由器将所有路由器重定向到空白页面
【发布时间】：2019-05-06 17:36:28
【问题描述】：

我以一种非常简单的方式设置了我的角度路由器，但没有任何路由加载任何组件，无论我做什么，它们都重定向到“”并加载一个空白页面。 app-root 组件始终加载导航栏，但其他路由均不起作用。

app.routing.module.ts

import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: '/home' }
];

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import Material UI Components
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProjectsComponent } from './projects/projects.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProjectsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <mat-toolbar color="primary">
      <span><img width="150" alt="Blitz Logo" src="../assets/blitz_logo_2014_v1_.png"></span>

      <!-- This fills the remaining space of the current row -->
      <span class="fill-remaining-space"></span>

      <span>A Link</span>
    </mat-toolbar>
  </div>
  <router-outlet></router-outlet>

注意：加载默认路由时，它会立即重定向到/home 但随后立即重定向回空白的''。手动输入'/home' 也会立即重定向到''，它是空白的。

【问题讨论】：

routerLink="/heroes" 在哪里？
我只是在浏览器 atm 中输入路由，它们都不起作用
您能否在此stackblitz.com/edit/… 中重新创建您的问题并使用仪表板而不是主页并编辑您的帖子？
它应该可以工作：stackblitz.com/edit/angular-hrppg1。看起来您的项目中还有其他东西会影响到这一点。修改我的示例。还要检查浏览器控制台中是否有任何错误 (F12)。
您是否在app.routing.module.ts 文件中导入了@angular/router？

标签： angular angular-ui-router

【解决方案1】：

建议的更正：

app-routing.module.ts

import { HomeComponent } from './home/home.component';

const routes: Routes = [
// [CORRECTION] The order in the array (here) is important.
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

/*@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }*/

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import Material UI Components
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';

// [CORRECTION] Import the array from app-routing.module.ts
import { routes } from './app-routing.module';
// [CORRECTION] Import RouterModule like this
import { RouterModule } from '@angular/router';
// import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProjectsComponent } from './projects/projects.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProjectsComponent
  ],
  imports: [
    BrowserModule,
    //AppRoutingModule,
    // [CORRECTION] Add the imported array here like this
    RouterModule.forRoot(routes),
    //--
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在应该可以正常工作了。

【讨论】：