CODEWITHSUNDEEP
cssangularbootstrap-4
Felipe Centeno
Felipe Centeno

Reputation: 3719

Converting a bootstrap 4 html project into Angular 9

So I found a really nice template that I want to use, but it's only HTML using bootstrap. I have found a few tutorials on how to convert a similar project, and it seems pretty straight forward (like here)

I added the first component and the head shows like this (I commented out most but one link tags to work with one at the time):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Some Html Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="../../assets/css/animate.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/line-awesome-font-awesome.min.css">
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="lib/slick/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css"> -->
</head>

I added the following to angular.json:

"styles": [
    "src/styles.css",
    "src/assets/css/animate.css"
],
"scripts": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

In styles.css I added:

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

I also installed

npm i bootstrap ngx-bootstrap jquery tether

When I try to run npm start I get the following error:

ERROR in HostResourceLoader: loader(/Users/felipe/Documents/mtalents/frontend/src/assets/css/animate.css) returned a Promise

When I run it without the link tags, it runs just fine, but all the styling is missing (as in I just get a blob of text).

I haven't modified the script tags but they don't seem to be complaining yet.

Just to be clear I added css, fonts, images, js, libs, vendor folders from the bootstrap template inside src/assets.

I'm not sure what am I missing? Thanks in advance!

Upvotes: 1

Views: 710

Answers (2)

cklimowski
cklimowski

Reputation: 601

What Eric Aska posted is correct, and you also need to remove the css file reference from your html if you are referencing it in your angular.json. Putting it in the angular.json essentially puts the reference into the head section of your html file during compilation. No reason to have it in both places, same for the scripts.

You also have a css file in the "scripts" section, it needs to be removed, and then you also imported this same css file into your styles.css. No need for the double dipping here either. I usually put things that are as global as bootstrap into my angular.json since pretty much every part of the app will be using it. However once it is in your angular.json you do not need to import it again into your styles.css.

If you want to customize the bootstrap SCSS variables, importing into a styles.scss folder would be an exception to the situation described in the paragraph above.

Upvotes: 0

Eric Aska
Eric Aska

Reputation: 636

in scripts array should be only javascript files or typescript (Im not sure about typescript) so remove this one

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

OPTION 1: if you don't use scss style you can add it in angular.json file as you added other styles

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/assets/css/animate.css",
              "src/styles.css",
           ],
"scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/@popperjs/core/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js"
            ]

and be aware of order in this styles array because they overwrite each other

OPTION 2: it should be added in your styles.scss file but scripts of bootstrap should be added to angular.json

@import '~node_modules/bootstrap/dist/css/bootstrap.min.css';

Upvotes: 2

Related Questions