angular - 将引导程序添加到styles.css时出现空白页面，删除引导程序并获得登录页面

Question

我在终端中没有任何错误或任何内容，只是一个空白页面，在开发人员工具中没有任何问题。我在其他任何地方都找不到关于这个问题的任何东西。我很感激任何提示谢谢。

styles.css：我删除它并显示我的登录 html 模板

@import 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css';

login.component.html：

<!--login modal-->
<div id="loginModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h1 class="text-center">Login</h1>
        </div>
        <div class="modal-body">
            <form class="form col-md-12 center-block">
              <div class="form-group">
                <input type="text" class="form-control input-lg" placeholder="Email">
              </div>
              <div class="form-group">
                <input type="password" class="form-control input-lg" placeholder="Password">
              </div>
              <div class="form-group">
                <button class="btn btn-primary btn-lg btn-block">Sign In</button>
                <span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>
              </div>
            </form>
        </div>
        <div class="modal-footer">
            <div class="col-md-1accordion2">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>  
        </div>
    </div>
    </div>
  </div>

app.component.html：

<router-outlet></router-outlet>

应用路由模块：

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


const routes: Routes = [
  {path: 'login', component: LoginComponent},
component files
  {path: 'register', component: RegisterComponent},
  {path: 'user/management', component: UserComponent }, 
  {path: '', redirectTo: '/login', pathMatch: 'full' }  

];

@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 { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './interceptor/auth.interceptor';
import { NotificationModule } from './notification.module';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';
import { UserComponent } from './components/user/user.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    NotificationModule,
   
  ],
  providers: [ 
   {provide: HTTP_INTERCEPTORS,useClass: AuthInterceptor,multi:true}],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angulartwitter-bootstrap