Transforming a Bootstrap 4 HTML project into Angular 9

After stumbling upon a beautiful HTML template that caught my eye, I realized it was built using Bootstrap. Luckily, I came across tutorials on how to convert such templates into Angular 6 projects, making the process seem quite straightforward (like this one).

I started by adding the first component, and the head section looked something like this (I've commented out most of the link tags to work with them one at a 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>

Subsequently, I made updates in angular.json:

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

In styles.css, I imported:

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

Additionally, I installed:

npm i bootstrap ngx-bootstrap jquery tether

However, when attempting to run npm start, an error message pops up:

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

Running without the link tags works fine, but the styling is absent (rendering just text). Surprisingly, the script tags remain unaffected.

Just to clarify, I transferred css, fonts, images, js, libs, vendor folders from the Bootstrap template into src/assets.

Any idea what I might be overlooking? Appreciate your assistance!

cssangularbootstrap-4

Answer №1

Ensure that the scripts array only contains JavaScript files or TypeScript (if applicable) by removing any other types of files.

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

OPTION 1: If you are not using SCSS style, you can include it in the angular.json file along with 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"
            ]

Be mindful of the order of styles in the array as they can overwrite each other.

OPTION 2: The styles should be added to your styles.scss file, while the Bootstrap scripts should be included in the angular.json file.

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

Answer №2

Eric Aska's advice is spot on, and it's important to ensure that you remove any duplicate references to CSS files in your Angular project. If you have included a reference in the angular.json file, there's no need to have it duplicated in your HTML or styles.css file. This applies to both CSS and scripts.

Check for any CSS files in the "scripts" section of your project and remove them if necessary. It's also worth mentioning that importing the same CSS file into multiple places can cause unnecessary redundancy. Consider placing global styles, like Bootstrap, in the angular.json file to avoid repetition.

For customizing Bootstrap SCSS variables, importing into a styles.scss folder would be an appropriate exception to this rule.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effortlessly adding custom classes in Angular 2 with a breeze

Imagine having a growing Angular2 typescript solution with numerous small classes and objects. Following the best practice, each class is placed in its own file. However, manipulating these objects leads to long lists of imports like: import {Object1} f ...

typescriptangular

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

Ways to properly execute ngOnDestroy() in Angular?

I have implemented a child component with a timer that sends an API call to the server every 2 seconds. I want this call to continue as long as the user remains on the page, even if they navigate away from the page but leave the parent component window ope ...

angularrxjsobservable

Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, ...

cssangularangular-materialangular13

Receiving contextual information from Microsoft Teams within an Angular application integrated as a tab

I am currently integrating an Angular website into a Microsoft Teams tab. In order to perform certain computations, I need to retrieve the Team ID. To achieve this, I have recently added npm install --save @microsoft/teams-js. Below is the code snippet th ...

angulartypescriptmicrosoft-teams

Unable to modify border color for Material-UI OutlinedInput

Having some trouble changing the border color of a v4.13 MaterialUI Outlined Input. No luck with CSS overrides. Tested multiple CSS rules targeting different elements, such as select and OutlinedInput. Here are my latest attempts. What am I missing? cons ...

javascriptcssreactjsmaterial-ui

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

errors.ts:30 ERROR Error: Unhandled promise rejection: Error: No routes found for specified URL Segment: 'products,%20productId'

I'm in the process of learning Angular by following a tutorial on a website. You can find it here: https://angular.io/start/routing Everything is going smoothly so far, except for the section on routing. If I add 'products/1' to the end of ...

angular

Using a zoom background image in an HTML document without any accompanying text

I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...

jqueryhtmlcss

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

External elements - My physical being is in a state of chaos

Hello there, I hope everything is well with you. I have been working on creating a form using MaterializeCss to calculate an invoice for a craftsman. The user is required to input a number or select an item. Everything seems to be going smoothly so far. ...

htmlcssmaterialize

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

htmlcssruby-on-railsfontsfont-awesome

Access dynamic content from Tinymce 4.x without any manual effort

Is there a way to extract the HTML content from a tinyMCE editor and display it on a page without using the tinyMCE editor itself? I know about the getcontent() function in tinyMCE, but is there another function, parameter, or plugin that can be used to ...

cssclasstinymceextract

Adjust the CSS of a dynamically generated jQuery checkbox button in real-time

I am working on a project where I am creating a series of jQuery checkboxes dynamically within a loop. Here is how I am doing it: var checkbox = $('<input>').attr({type: 'checkbox', id: checkbox_id); panel.append(checkbox); panel ...

javascriptjquerycssjquery-ui

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox

Is It Possible to Align Text Horizontally within a Box?

Hey everyone! I'm trying to figure out how to display two elements, "1" and "new referral," side by side without the new referral having a green background. Any help would be greatly appreciated. I've shared my HTML and CSS code snippets below. I ...

htmlcss

Is there a way to click on a button and have its background color change randomly each time?

I am facing an issue with a button on my HTML page. When the button is clicked, I want its background color to change to a random different color. However, despite trying various sources, I am unable to get it right. It seems like I am not placing the code ...

javascripthtmlcss

Tips for concealing a tab upon selecting an option from a dropdown menu

<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#song">Song</a></li> <li id="image-tab"><a href="#image" data-toggle="tab">Image</a></li> </ul> <div class="tab-cont ...

javascriptjqueryhtmlcsstwitter-bootstrap

In my HTML document, I have three identical Id's and I need to figure out how to target the third one using CSS. Can you help

I am working on an HTML document that contains multiple instances of ids and classes. Here is a snippet of the code: <!DOCTYPE html> <html> <body> <div id="Caption_G" class="editor-group"> editor-group<br /> ...

htmlcss

Implement the agmCircle method from angular-google-maps in a typescript file

Is there a way to retrieve the bounds of a circle once it has been changed? I noticed on that there is a "getBounds" method available. How can I access this method from my typescript file in order to log this data? This is how my html circle component cur ...

angulargoogle-maps