将bootstrap添加到styles.css时显示空白页，删除bootstrap并得到登录页面

编程问答 2022-08-16

问题描述

我没有错误，或者在终端上没有任何错误，只是空白页，在开发人员工具中也没有错。关于此问题，我也找不到其他任何地方。我感谢任何提示，谢谢您。

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>

app-routing-module：

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 { }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangulartwitter-bootstrap