I'm encountering an unexpected error as I attempt to incorporate a bootstrap template into my Angular application. What could be causing this issue

I am not very experienced with front-end development, so for my current project, I have decided to utilize a pre-made Bootstrap template. I am in the process of integrating it into my project, relying more on my intuition rather than technical expertise due to my limited experience in front-end development.
Below are the template files and folders I am working with:
https://i.sstatic.net/6U0LR.png
Within the Angular app, I have created four components:
- about - contact - portfolio - work
I have copied the corresponding HTML file into each of these components. The index file has been placed in the app.component.html file.
I have made changes to the file paths in the app.component.html (formerly index.html in the original template folder) as the assets (CSS/fonts/images/JS/Sass) are now located in different folders from the app.component.html (formerly index.html in the original template folder). For example: 

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

has been updated to: 

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

I believe I am following the correct procedure, but I continue to encounter the following error message:

GET http://localhost:4200/assets/css/bootstrap.css 404 (Not Found)

angularhtmlcssbootstrap-4

Answer №1

When running the Angular server, it initializes the server at the PROJECT_DIR/src directory. Therefore, localhost:4200 points to the src folder, and if you are attempting to retrieve bootstrap.css from ../assets/css in PROJECT_DIR, the assets folder is located within the src folder. This is why you are encountering a 404 not found error.

To include a stylesheet in index.html, you can use the following code:

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

There is no need to use "../" because the Angular server directory is in the PROJECT_DIR/src folder.

Alternatively, you can also include stylesheets in the angular.json file within the styles array:

{
  ...
  "projects": {
    "vjs-ng-data-sharing-poc": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "src/assets/css/bootstrap.css" <-- your css file path
            ],
...

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

A step-by-step guide on transferring Data URI from canvas to Google Sheet using the fetch method

I am trying to send an image as base64 code to a Google sheet using fetch. However, I am encountering an error that says "data_sent is not defined" when I run my code. I need help identifying the problem and finding a solution to fix it. For reference, & ...

javascripthtml

Ways to display a GIF image as a pop-up during data loading in an MVC application

I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...

javascripthtml

Is there a way to stop objects in a particular list from being dragged into another nested ul using jquery sortable?

I am faced with a challenge regarding nested lists, specifically when it comes to preventing parent-parent list items from dropping into an inner <div> within an <li> <div> that already contains its own <ul> <li> list. Additio ...

jquerycsshtml

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

htmlcssflexbox

Angular configuration files fail to be exchanged promptly

I am utilizing Angular 9 with the View Engine compiler. I have two separate files where I hold environment variables: environment.ts: export const environment: any = { production: false, }; environment.prod.ts: export const environment: any = { ...

angularenvironment-variablesng-modulesangular-compilerangulartics2

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

csssvg

Tailwind configuration is failing to export complete CSS styles

I have been attempting to integrate the entire Tailwind 3.0 CSS library into a new Laravel 8.* project in order to utilize the corePlugins feature to eliminate unwanted styles. Despite setting everything up quickly, I am only seeing the basic styles publis ...

htmlcssnpmtailwind-cssnpx

Learn how to extract an ID created with AngularJS using JavaScript

I have a piece of code that generates multiple divs using ng-repeat and assigns each one an id based on a specific value. <div ng-repeat="item in $scope.items"> <div id="ajs-{{item.title}}">{{text}}</div> <script> v ...

javascripthtmlangularjs

Ways to retrieve a json file within Angular4

Seeking guidance on accessing the data.json file within my myservice.service.ts file. Any suggestions on how to accomplish this task? Overview of directory structure https://i.stack.imgur.com/WiQmB.png Sample code from myservice.service.ts file ht ...

jsonangular

Which option is more effective: using an id or using !important?

While some say to avoid using the !important rule and others argue that since ids are unique, there is no need to target like #main > #child and you can simply use #child. In my particular case: #main > div{ color: red; } #child{ color: blue;/ ...

csscss-selectors

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

csshtmlweb-applicationsweb

Execute script when the awaited promise is fulfilled

I am looking to retrieve the URL of a cat image using the Pexels API through a script, and then set that image link as the source of an actual image element. I attempted to include some loading text to keep things interesting while waiting for the image l ...

javascripthtmlasynchronousasync-await

Two-toned diagonal design featuring a lone character

I'm searching for a unique design featuring the letter "d" in two colors, arranged diagonally without any gradient effects. Here is the CSS code I am currently using: .gradient_text_class { font-size: 72px; background-image: linear-gradient(50de ...

htmlcss

Display HTML content repeatedly depending on the number selected in a dropdown menu using AngularJS

I need your assistance with a dropdown selection feature on my website. The idea is that based on the number chosen from the dropdown, I want to dynamically repeat sections in HTML. For example, if I select 3 from the dropdown menu, the page should display ...

javascripthtmlangularjs

Guide on displaying the <html> tag within text using AngularJS

I need to display some data in HTML, which looks like this: <p>abcd efg hijk....(<a href=\"http:\/\/www.facebook.com\/stock\/NBR\">NYSE:NBR<\/a>),, however, there are some HTML tags within ...

htmlangularjs

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

PHP Warning: Attempting to access a key that does not exist in the array

Upon checking the error_log, I came across this error message. Searching on Google led me to a suggestion of adding the "isset" function. PHP Warning: Undefined array key "h" in /path-to-script/script.php on line 452 This error is connected to line 45 ...

phphtml

The content division does not have a set position

The content div is not adapting to different screen sizes properly. As the width and height of the browser shrink, it's overlapping with the header and footer. I'm using flex but I'm unsure if I'm implementing it correctly. display: ...

htmlcssresponsive