CODEWITHSUNDEEP
angularangular-clitwitter-bootstrap-4
royB
royB

Reputation: 12977

Angular-cli cannot reference bootstrap

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

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

Upvotes: 1

Views: 439

Answers (3)

Pablo Ezequiel Inchausti
Pablo Ezequiel Inchausti

Reputation: 20563

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

Upvotes: 0

pd farhad
pd farhad

Reputation: 6432

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 :)

Upvotes: 1

stijn.aerts
stijn.aerts

Reputation: 6206

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

Upvotes: 1

Related Questions