Angular路由默认URL重定向登录页无内容显示问题求助

你遇到的页面空白、默认路由重定向不生效问题，和路由配置本身无关，是应用初始化阶段抛出未捕获的运行时错误，中断了整个Angular启动流程，导致<router-outlet>无法渲染、路由跳转逻辑完全不执行。
从你贴的代码来看，最高概率的两个触发原因如下：

1. LoginComponent构造函数中注入的AuthService未在Angular依赖注入体系中注册，抛出NullInjectorError依赖注入错误
2. LoginComponent元数据中引用的样式文件后缀与实际文件不匹配（代码里写的是.scss后缀，如果你实际创建组件时用的是默认css样式，就会报404找不到样式文件的错误）

打开浏览器开发者工具的Console面板，就能看到明确的报错信息，对应报错直接匹配下面的解决方案即可。
注：你写的路由配置本身完全合规：空路径重定向加了pathMatch: 'full'、<router-outlet>放置位置正确、所有路由组件都在AppModule中完成声明，路由模块没有任何写法问题。

修复依赖注入错误（对应控制台报No provider for AuthService的情况） #

两种修复方式二选一即可：

• 方式1（兼容所有Angular版本）：在app.module.ts中注册服务

// 新增服务引入，路径和login组件中的引用保持一致
import { AuthService } from './shared/auth.service';

@NgModule({
  declarations: [
    // 原有声明代码无需修改
    AppComponent,
    LoginComponent,
    RegisterComponent,
    DashboardComponent
  ],
  imports: [
    // 原有导入代码无需修改
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  // 将AuthService加入依赖提供者列表
  providers: [AuthService],
  bootstrap: [ AppComponent ]  
})
export class AppModule { }

• 方式2（Angular 6+官方推荐写法）：给AuthService配置自动注册
  打开src/app/shared/auth.service.ts文件，修改@Injectable装饰器配置：

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

@Injectable({
  providedIn: 'root' // 配置后服务会自动在根注入器注册，无需再写入AppModule的providers
})
export class AuthService {
  // 服务原有业务逻辑保持不变
}

修复样式文件引用错误（对应控制台报404找不到login.component.scss的情况） #

打开login.component.ts，修改styleUrls配置项里的文件后缀，和你本地实际存在的样式文件后缀保持一致即可：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  // 如果你的样式文件是css后缀就改成./login.component.css，是scss就保留原有写法
  styleUrls: ['./login.component.css']
})

修改完成后保存代码，重启Angular开发服务，访问根域名时会自动重定向到/login路径，页面正常渲染Login组件内的标题内容，控制台无报错。

内容的提问来源于stack exchange，提问作者flippyforever