1

I am using the syntax for import bootstrap 4 library for static file

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

angular.json

{
...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angularapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/browser-not-supported.html"
            ],
            "styles": [
              "src/styles.less"
            ]
            ...
          }
}
...

browser-not-supported.html

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

Results:

enter image description here

Dose anyone have same problem?

Thanks!

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
dangchithao
  • 613
  • 2
  • 8
  • 24

4 Answers4

0

add your bootstrap reference link to your styles property in your angular.json file

example:

        "styles": [
          "src/styles.less",
          "../node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]
laserany
  • 1,257
  • 1
  • 8
  • 17
  • it only work with index.html file, what did I wanted it work for static file in assets section – dangchithao Dec 18 '19 at 04:03
  • an easy workaround would be to copy the link from the bootstrap website however since it is inside your asset folder then perhaps your href is supposed to be "../../../node_modules/bootstrap/dist/css/bootstrap.min.css" instead? Edit: Also after you make these changes make sure you stop your server and close your command line/terminal then run again – laserany Dec 18 '19 at 04:10
  • I will consider use the CDN when I don't have any ways import from node_modules – dangchithao Dec 18 '19 at 04:16
0

Put your css file inside your assets/css folder then change like this

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

Or include in your angular.json file

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ]
Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
  • how I can use it direct in node_modules, I don't want to copy it on css folder. For include it in styles section, that way only work with index.html file(main), not work with static file – dangchithao Dec 18 '19 at 04:05
  • You can only do that by include in your angular.json like I just mention – Tony Ngo Dec 18 '19 at 04:06
0

1) install bootstrap

npm i bootstrap

2) edit "style" array which is in angular.json or .angular-cli.json

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

3) import again it into styles.less

@import "~bootstrap/dist/css/bootstrap.css";
Sanka Sanjeewa
  • 1,993
  • 14
  • 16
  • oh, no no, it only work with index.html(main), not working with static file :D – dangchithao Dec 18 '19 at 04:09
  • @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['../../node_modules/bootstrap/dist/css/bootstrap.min.css'] }) can you try this – Sanka Sanjeewa Dec 18 '19 at 04:15
  • It not a component, it is static page `browser-not-supported.html` – dangchithao Dec 18 '19 at 04:18
  • create a new stylesheet file and import it into your html file and check whether it is working or not. if it is working, copy all codes from bootstrap.min.css to new stylesheet and try – Sanka Sanjeewa Dec 18 '19 at 05:17
0

Try installing it using npm:

npm install ngx-bootstrap bootstrap --save

For more details visit:

How to add bootstrap to an angular-cli project

Arjun D Nair
  • 217
  • 1
  • 3
  • 14