Bootstrap not working and not displaying data (Angular)

Question

I started this Angular course and i got stuck at the very beginning... I installed Bootstrap through its guide and still i get blank page.

re-installing the whole thing didint help

angular.json

"styles": [
          "src/styles.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css"

        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `<app-server></app-server>
              <app-server></app-server>`,
  styleUrls: ['./app.component.css',]
})
export class AppComponent {
  title = 'title';
}

app.module.ts

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


import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-1-12">
      <h3>new component here</h3>
      <hr>
      <app-servers></app-servers>
    </div>
  </div>
</div>

Does this file exist in your node modules: ./node_modules/bootstrap/dist/css/bootstrap.min.css — jazza1000, Jan 23 '19 at 14:50
no errors, server works fine and this is the screen https://imgur.com/gHDU10k i installed bootstrap with npm, yes the file exists in node modules. — Angelov, Jan 23 '19 at 14:51
Possible duplicate of [How to add bootstrap in angular 6 project?](https://stackoverflow.com/questions/50290197/how-to-add-bootstrap-in-angular-6-project) — Vikas, Jan 23 '19 at 15:00

score 0 · Answer 1 · answered Jan 23 '19 at 15:27

The bootstrap for angular 2+ is named by NgBootstrap. You can check they page https://ng-bootstrap.github.io/#/home

The dependency of Ng bootstrap is inserted on package.json by installing in the solution with

npm install --save "@ng-bootstrap/ng-bootstrap"

If you dont have installed ng-bootstrap in you machine you need to install it globally, and then add the -g flag to install

npm install -g "@ng-bootstrap/ng-bootstrap"

And then try to reinstall using the fist command

Bootstrap not working and not displaying data (Angular)

1 Answers1