Angular-cli cannot reference bootstrap

Question

Using Angular-cli, I'm trying to reference bootstrap.css

index.html

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <base href="/">
        <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
        ...
    </head>
    <body> Angular-cli auto generated code </body>
    <html>

package.json

"dependencies": {
    "bootstrap": "4.0.0-alpha.2"  
 }

Now i understand that ng build creates a dist project and in vendor folder Are all the includes that are needed, And I've managed to add to the vendor folder the bootstrap file by:

system-config.js

// Apply the CLI SystemJS configuration.
System.config({
 map: {
    ...
    'bootstrap': 'vendor/bootstrap/dist/css/bootstrap.css'
 },
 packages: cliSystemConfigPackages
 });

and angular-cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
       ...
       'bootstrap/dist/css/bootstrap.css'
    ]
});

};

But still The server couldn't find bootstrap.css

Notes

I'm not looking for a CDN solution, I want to understand how to import things from node_modules
Not looking for `ng2 angular directives so this question is not really a valid solution

stijn.aerts · Answer 1 · 2016-07-26T11:30:13.933

1

Try this:

<link rel="stylesheet" href="../vendor/bootstrap/dist/css/bootstrap.css">

In the dist folder there should be no node_modules folder, instead there is a vendor folder which you should use.

EDIT: see https://github.com/angular/angular-cli/wiki/3rd-party-libs

edited Jul 26 '16 at 11:30

answered Jul 26 '16 at 09:18

stijn.aerts

6,026
5
30
46

Yes, I've specified that i've managed to do it. but i'm not sure it's the way to go + i need to modify both angular-cli-build.js and system-config.ts which i think is big hassle + the worst => no intellisense autocomplete which is absolutely unacceptable (-; – royB Jul 26 '16 at 10:30
This is the way to go for now. For every external dependency you have to do this. They are going to simplify this process however, don't know when. Edited my post with more info. – stijn.aerts Jul 26 '16 at 11:28

score 1 · Answer 2 · edited Feb 28 '17 at 04:29

If you dont get any npm for your third-party libraries. Make an assets folder under your src folder. Then you can add separate folders for js,css and images. Put your third-party css inside the cssfolder. Then you have to reference css file in your index.html like this way:

 <link rel="stylesheet" href="assets/css/your_css.css" />

Now, when you do ng serve or ng serve it will automatically update the public folder with your assets/css. Hope you understand the whole scenario :)

score 0 · Answer 3 · edited May 31 '22 at 08:01

You shouldn´t reference to css directly to the node_modules because this dir is outside your angular ap:

You have three possibilities to link the bootstrap css, the first one is copy bootstrap in your assets dir, and link with

<link rel="stylesheet" href="assets/css/bootstrap.css">

The second on is to get the css from the ** Bootstrap public CDN**:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

And the third one is to use a library like ng2-bootstrap (I am using it): the steps to install are easy, and you can read it from this link or I will copy it:

npm install ng2-bootstrap --save

in your src/app/app.module.ts and add

import { AlertModule } from 'ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
    ... 
})

open angular-cli.json and insert a new entry into the styles array

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

open src/app/app.component.html and add

<alert type="success">hello</alert>

this lib worked ok for me

Angular-cli cannot reference bootstrap

3 Answers3