Can the performance of an angular 6 application be slowed down by loading the same bootstrap css file multiple times?

In my Angular 6 application, I noticed that Bootstrap is being loaded multiple times - once in the src/index.html file and then again in each component's .ts file.

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

 styleUrls:[
    **'../../../../assets/css/bootstrap/css/bootstrap.min.css',**
    '../../../../assets/css/font-awesome/css/font-awesome.min.css']

With multiple components (header, footer, sidebar, body) on a single page, Bootstrap CSS is being loaded four times, potentially slowing down the page load.

Question: Does loading the same CSS file multiple times impact page load speed?

To optimize page loading, can I remove Bootstrap from individual components and import it just once in the main style.css using:

@import 'assets/css/bootstrap/css/bootstrap.min.css';

During development, even a small change triggers a long page reload time due to excessive Bootstrap loading. Seeking suggestions on how to proceed efficiently.

angulartypescriptangular6

Answer №1

A common technique is loading Bootstrap directly into the main CSS file and eliminating styleUrls. The purpose of styleUrls is mainly for controlling styling at the component level. In Angular, CSS files are typically added in the .json configuration file under the 'styles' section, where 'styles.css' is commonly included as the global stylesheet by default.

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

Angular2 and the exciting world of Mapbox-gl

I am currently facing an issue with integrating mapbox-gl into my Angular2 application. Despite creating the service, the app is not functioning properly. Service import {Injectable} from '@angular/core'; import * as mapboxgl from 'map ...

angularmapbox-gl

Transforming .d.ts files into HTML documentation

I possess a TypeScript declaration file (.d.ts) carefully documenting each function of an API. Can this documentation be elegantly displayed on a website in HTML format? Is there a solution for converting a .d.ts into a visually appealing .html document? ...

typescriptdocumentation

Even after importing the API key, I am still receiving the message "This domain is not registered with Tiny Cloud."

I have implemented the TinyMCE code provided in their documentation: <editor [init]="{ apikey: '<secret>', height: 500, plugins: [ 'a11ychecker','advlist','advcode','advtable',&apos ...

angulartinymcetinymce-5

Creating a union type from an array that is not a literal (using `Object.keys` and `Array.map`)

Can a union be derived from a non-literal array? I attempted the following: const tokens = { "--prefix-apple": "apple", "--prefix-orange": "orange" }; const tokenNames = Object.keys(tokens).map(token => toke ...

typescripttypescript-typings

I'm looking for the best place to place code for initialization before initializing a custom module in Angular 14

Using ngrx/data 14 and Angular 14, I have constructed a unique custom module that I include in my app.module.ts file as follows: @NgModule({ declarations: [ AppComponent ], imports: [ ... AppRoutingModule, MyCustomModule, ... ] ...

angularinitializationangular-moduleangular14angular-ngrx-data

Using an Angular 2 filter pipe to search across multiple values

Currently, I am working on implementing a filter for a table of users using pipes. While I have successfully made it work for filtering based on one selection, I am now attempting to extend this functionality to accommodate multiple selections. It's i ...

angulartypescriptangular-pipe

How can I stop the SvelteKit production node server from filling up the logs with "Error: not found /path/here"?

After developing a website using sveltekit, I decided to build it for production as a nodejs server and deploy it on my linux server with Caddy as a reverse proxy. Unexpectedly, upon starting the server, I began receiving error messages in the log such as ...

node.jstypescriptsveltekit

Token authentication in Angular 4

I need to retrieve data from a URL after posting the username and password. However, I encounter an error when trying to get the token using the GET method. The error message is: : Response for preflight has invalid HTTP status code 405. @Component({ ...

angulartypescriptauthenticationtoken

Angular is used to send an HTTP GET request

I'm seeking assistance with implementing a get and put request in Angular. I understand how to initiate a get or put request when a button is clicked, by binding the request to the button itself. However, I am now looking for a way to trigger a get re ...

htmlangulartypescript

How can one determine the source of change detection activation in Angular 2?

I just launched a new component and it appears to be causing change detection to occur multiple times per second: // debugging code ngDoCheck() { console.log('DO_CHECK', new Date().toLocaleTimeString()); } Results: https://i.sstatic. ...

angular

Automatically execute a function every 5 seconds in Angular application

I have a component in Angular that is responsible for fetching data from the backend. Below is the code snippet of the component export class MessagesComponent implements OnInit { constructor(private _router: Router, private http: HttpClient) { } t ...

javascriptangulartypescript

Upgrading an Angular 1 directive to Angular 4

I have created a custom directive in Angular 1 that allows drag and drop functionality for images in a web application. Here is the original code: 'use strict'; angular.module('abc').directive("imageFileRead", ['$document', ...

angularjsangulardirective

Converting multiple tiff image files into a single image in Angular 9: A step-by-step guide

I am currently developing a web application using Angular 9. I am looking to incorporate a feature that will enable the conversion of multiple Tiff images into a single PDF or window.URL.createObjectURL(blob) of pdf. let images = ["http://netghost.nar ...

javascriptangulartypescriptpdfnpm

Typescript raises an error when providing a potentially null value (that is not null) to an unnamed callback function

When dealing with a property that starts as null, how can I pass it to an anonymous callback function expecting a non-null value without TypeScript throwing errors? I've tried wrapping the function call in an if statement to check for null at the cal ...

typescriptvue.jserror-handlingvuex

Display the dropdown in the @ng-select/ng-select component when typing

Currently implementing ng-select, I have a multi-select dropdown functionality. Everything is functioning correctly, but I am looking to make a modification. My goal is to display the dropdown menu only when the user begins typing and then show filtered ...

angulartypescriptangular-ngselect

the ng-repeat directive disables input controls within the tfoot

When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, e ...

javascriptangularjstypescripthandlebars.js

Sending information to a service from the main.ts file in an Angular application

Within my Angular CLI application, I have a main.ts file that includes the following export statement. This file serves as a microservice that receives CONTEXT from another microservice. export default { async mount({ rootElement, context }: Extension) ...

angularangular-cliangular-cli-v9

Issue code: 135 - Resolution steps: You are encountering an issue as the update-config.json file is missing. To resolve this, execute the command 'webdriver-manager update

[17:05:22] I/launcher – Running 1 instances of WebDriver [17:05:22] I/direct – Using ChromeDriver directly… [17:05:22] E/direct – Error code: 135 [17:05:22] E/direct – Error message: Could not locate update-config.json. Please run ‘webdriver ...

angularselenium-webdrivere2e-testingangular-e2e

Tips for accurately specifying types for TypeScript map, reduce, filter, and other functions

Encountering errors in my TS code when attempting to provide the correct type to the built-in .map and .filter functions. For example, using: Object.values(league.games).map((game: Game) => { results in Error: Argument of type '(game: Game) => ...

javascriptreactjstypescripttypes

Exploring the Integration of Angular 5 with Firestore for Working with Nested

I have a firestorm collection that follows this specific structure: USERID { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354150464175415046411b565a58">[email protected]</a>" name: "John Doe" ...

jsonangularfirebaseobjectgoogle-cloud-firestore