Angular 路由模块不会重定向或带入组件答案

【问题标题】：Angular routing module don't redirect or bring to the componentAngular 路由模块不会重定向或带入组件
【发布时间】：2021-05-07 19:47:54
【问题描述】：

我正在尝试启动一个 Angular 项目，但由于某种原因默认应用程序无法运行。

应用程序启动时没有任何错误，但浏览器显示一个空白页面而不是“home works！”。

当我进入登录页面时，什么也没有发生，其他链接（如 /hello）不会将我重定向到主页。我认为我的路由模块根本不工作。我可以在 url 中写任何东西没有任何反应。代码如下：

app-routing.module.ts ：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import {EdoxiaGuard} from './services/guard/edoxia-guard.guard';

const routes: Routes = [
  { path: '/', component: HomeComponent, canActivate:[EdoxiaGuard] },
  { path: '/login', component: LoginComponent, canActivate:[EdoxiaGuard] },
  { path: '**', redirectTo: '/' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
    { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [LoginComponent, HomeComponent]

app.component.ts ：

import { Component } from '@angular/core';

@Component({
  selector: 'edoxia',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'edoxia-front';
}

app.module.ts ：

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

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { ToolbarComponent } from './shared/toolbar/toolbar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    ToolbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html：

<router-outlet></router-outlet>

index.html：

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>EdoxiaFront</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <edoxia></edoxia>
</body>
</html>

home.component.html：

<p>home works!</p>

home.component.ts ：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

login.component.html：

<p>login works!</p>

login.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
  }

}

edoxia-guard.guard.ts ：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EdoxiaGuard implements CanActivate {
  canActivate() {
    return true;
    }
}

【问题讨论】：

我正在使用 Pop!_OS 20.04 LTS Gnome 版本：3.36.8 NPM 版本：6.14.12 @angular/router@11.2.13

标签： angular

【解决方案1】：

您检查过控制台吗？我想你会得到一个有用的错误说：

Error: Invalid configuration of route '/': path cannot start with a slash

所以你应该从你的路线中删除斜线，以：

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate:[EdoxiaGuard] },
  { path: 'login', component: LoginComponent, canActivate:[EdoxiaGuard] },
  { path: '**', redirectTo: '' }
];

我还注意到您没有导入RouterModule，这是必需的。

app.module.ts:

imports: [
  RouterModule, <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  BrowserModule,
  AppRoutingModule, 
  BrowserAnimationsModule
],

那么您的应用应该可以正常工作。检查此Stackblitz。

编辑：开始运行您的项目，开发控制台也会在这里为您提供帮助。它说...

Error: No base href set

所以你需要在head标签内添加到你的index.html，是：

<base href="/">

【讨论】：

感谢您的时间和您在 Stackblitz 上的示例。我下载了该应用程序，但它不起作用。浏览器只在页面上显示“正在加载”，没有路由工作。我在控制台日志中也没有错误。
由于代码到目前为止很简单，也许将项目上传到github（例如），我可以尝试在本地运行它。
我在github上创建了一个项目。 github.com/icehandler/edoxia-front
更新了我的答案。请使用开发工具控制台（F12）它会给你有用的错误，它也会在这里帮助你;）i.imgur.com/EHLf00f.png
... tsconfig 的名字也很糟糕，你是怎么运行这个项目的，在我正确命名之前它不会运行。

【解决方案2】：

在你的路由组件中试试这个

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

【讨论】：