0

I am trying to setup a simple project with Angular2/4 with bootstrap.

I cloned the Angular-Webpack-Starter repo, removed the things which are no longer needed and added bootstrap according to the link https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

When I start the server through npm run server, it is getting compiled correctly. But css/scss are not getting loaded.

As you see in the below snapshot, css are not getting loaded. enter image description here

I am using the following HTML in the HomeComponent

<div>
    <h1>HOME</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-6"> 1 of 2 </div>
            <div class="col-md-6"> 1 of 2 </div>
        </div>
        <div class="row">
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
            <div class="col-md-4"> 1 of 3 </div>
        </div>
    </div>
</div>

What is that I am doing wrong here?

Abhijith Nagaraja
  • 3,370
  • 6
  • 27
  • 55

2 Answers2

1

If you are talking about the bootstrap css files, then those should be included in your index.html file like so 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

You could also reference the bootstrap package installed in the node_modules folder after running npm install from the root directory of the project

However, if it is a component's css that is not getting loaded, then try setting encapsulation to None like so. When you load a component's css, it is not applied globally but making ViewEncapsulation.None will make them global.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})

Does this answer your question? Also I would recommend using the AngularCLI tool and then running ng serve

Alex Nelson
  • 359
  • 1
  • 3
  • 14
  • if we refer the css directly from CDN what is the point of dependencies mentioned in packages.json? – Jameel Moideen Aug 05 '17 at 04:53
  • You could do either, they both work. I'm not exactly sure what the advantages of one over the other are though – Alex Nelson Aug 05 '17 at 04:58
  • It will work I Agree , what happen when application become offline? – Jameel Moideen Aug 05 '17 at 04:59
  • If you don't have internet, then the CDN won't work which is something to consider if you develop on the go. Then you would have to install bootstrap instead of referencing the CDN – Alex Nelson Aug 05 '17 at 05:01
  • In his question he is already mentioned , he is installed the bootstrap dependencies , So there is no relevance of referring the dependencies from CDN – Jameel Moideen Aug 05 '17 at 05:08
  • @AlexNelson: I am loading bootstrap from bootstrap loader through config (in my case weback.common.js). I am also using ViewEncapsulation.None. I have followed https://github.com/AngularClass/angular-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery) to the letter. But I am still missing something. – Abhijith Nagaraja Aug 05 '17 at 09:18
  • Try viewing the page source in your browser to double check if the css files were actually loaded – Alex Nelson Aug 05 '17 at 09:20
0

Once you downloaded the seed application , you have to install all the node packages mentioned in package.json. To install navigate in to the root directory and run the command

npm install

If bootstrap is not installed , install the dependencies and refer the dependencies directly from the node_modules downloaded in your directory

 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
Jameel Moideen
  • 7,542
  • 12
  • 51
  • 79