我无法让 Angular 路由正常工作

Question

I am working on an Angular website with Firebase as the backend.我正在开发一个以 Firebase 作为后端的 Angular 网站。 I'm using routing and would like to redirect the default url to a login page but nothing is appearing.我正在使用路由并希望将默认 url 重定向到登录页面，但没有出现任何内容。 All of the routes seem to be correct.所有的路线似乎都是正确的。 Any help?有什么帮助吗？

app.module.ts: app.module.ts：

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { initializeApp,provideFirebaseApp } from '@angular/fire/app'; import { environment } from '../environments/environment'; import { provideAuth,getAuth } from '@angular/fire/auth'; import { provideFirestore,getFirestore } from '@angular/fire/firestore'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, RegisterComponent, DashboardComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule, provideFirebaseApp(() => initializeApp(environment.firebase)), provideAuth(() => getAuth()), provideFirestore(() => getFirestore()) ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }

app-routing.module.ts:应用程序路由.module.ts：

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent }, { path: 'dashboard', component: DashboardComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

app.component.html: app.component.html：

 <router-outlet></router-outlet>

login.component.html: login.component.html：

 <h1 style="font-size: large;">Somthing</h1>

login.component.ts: login.component.ts：

 import { Component, OnInit } from '@angular/core'; import { AuthService } from 'src/app/shared/auth.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'] }) export class LoginComponent implements OnInit { email: string = ""; password: string = ""; constructor(private auth: AuthService) { } ngOnInit(): void { } login() { this.auth.login(this.email, this.password); } }

index.html:索引.html：

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

Answer 1

You should try adding the following route:您应该尝试添加以下路线：

{path: '**', redirectTo: ''}

The '**' path is the one that has the behaviour you are expecting. '**' 路径是具有您期望的行为的路径。

So the "app-routing.module.ts:" should look something like this:所以“app-routing.module.ts:”应该是这样的：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {DashboardComponent} from './components/dashboard/dashboard.component';
import {LoginComponent} from './components/login/login.component';
import {RegisterComponent} from './components/register/register.component';

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: '**', redirectTo: ''}
];

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

我无法让 Angular 路由正常工作

问题描述

1 个解决方案

解决方案1
-1 2022-06-23 21:18:24

我无法让 Angular 路由正常工作

问题描述

1 个解决方案

解决方案1 -1 2022-06-23 21:18:24

解决方案1
-1 2022-06-23 21:18:24