Search code examples
bootstrap-4upgradeangular6

How to properly upgrade from bootstrap 3.3.7 to 4.0 on an Angular 6 project

I am developing my first Angular 6 project and, first, I installed Bootstrap 3.3.7 (via npm)

Now I have seen here some carousels and things that I would like to implement on my project but BS 4.0 is needed.

How should I do the upgrade in a safe way? I tried myself but I must have broken something because project stopped compiling. I restored the backup and I would like to do it right now.

Thanks

Solution

  • Following steps can help you.

    1. Find a file in your project root directory named package.json.
    2. In that file go to dependencies object. Find "bootstrap":"^3.3.7".
    3. Modify that entry to "bootstrap":"^4.0.0".
    4. Run npm install in your project root directory.

    The above steps successfully install bootstrap-4 in your node_modules.

    To use bootstrap .js and .css files you have to import them in your angular.json file.

    To do that go to styles array in your angular.json file and import bootstrap .css files as below:

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

    To import bootstrap .js files go to scripts array in your angular.json and import as below:

    "scripts":[
   "./node_modules/bootstrap/dist/js/bootstrap.min.js",
]

    Now compile your code with ng build or ng serve. It will work smoothly. Let me know if it throws any error.