Recently, I updated my node version and encountered a new error:
custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang
I'm not sure what's causing this issue. Can someone help me troubleshoot this error? My current node version is 14.X.
Following the update of node to version 12 and Angular from 11 to 12, I encountered a similar warning message. Upon investigation, I discovered that the issue lies with :lang(en) in Bootstrap v4.6.0. While it is not categorized as an error but rather a warning, I have chosen to overlook it for now. The only solution seems to be awaiting an upgrade from Bootstrap.
The reason for this issue may be attributed to the deprecation of the :lang() selector in the latest Angular update. A possible workaround is to use the following code instead:
[lang="en"] {
// Your code here
}
[lang="fr"] {
// Your code here
}
Upon recently updating my project from Angular 11 to 12, I decided to do a production build for the first time today. During this process, I came across a warning stating "unmatched pseudo-class :lang". After some research, I stumbled upon a thread on mdbootstrap.com where a member of their team suggested a solution:
Instead of setting "optimization":true in angular.json, they recommended using the following configuration:
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
}
Although I'm not entirely sure about the specifics of this change, implementing it successfully resolved the warning message.
Check out the thread on Material Design for Bootstrap for more information.
After updating our application to Angular 12, we encountered a similar error (Angular 12 with Bootstrap 4).
One of the UI developers on my team was able to resolve this error by overriding the bootstrap selector like so:
$custom-file-text: ();
This snippet of code was added to the _bootstrap.scss file.
I trust that this tip will assist you in resolving the issue as well.
Enhanced using bootstrap 5.x to work seamlessly with angular version 12.
Place $custom-file-text: (); above the bootstrap import statement
$custom-file-text: (); // --> Caution: 1 rule disregarded due to selector errors: .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang
@import "~bootstrap/scss/bootstrap";
I faced an issue with a local version of Bootstrap 4.0.0 saved in the CSS directory. I managed to solve it by deleting the file, although I acknowledge that this may not be the most ideal solution.
.custom-file-input:lang(en)~.custom-file-label::after{content:"Browse"}
To eliminate the warning message, I made a modification by updating
.custom-file-input ~ .custom-file-label::after {
content: "Browse";
}
instead of
.custom-file-input:lang(en) ~ .custom-file-label::after {
content: "Browse";
}
Taken from
node_modules -> bootstrap -> dist -> css -> bootstrap.css(I opted to remove 'lang()' since it is no longer supported)
Initially, I encountered permission errors while trying to install puppeteer via npm due to the .local-chromium folder. Following guidance from this Stack Overflow post, that issue was resolved. However, a new error has now surfaced: $ sudo npm install pup ...
Hello there! I am new to learning angular and typescript, and currently going through a tutorial at angular. However, I stumbled upon something that I find confusing. For example: 1. getHeroes(): Observable<Hero[]> { this.messageService.add(&ap ...
Currently, I am in the process of learning how to emit events with the NodeJS Event module. However, I have hit a roadblock when it comes to setting up an efficient workflow. I am interested in monitoring for new posts being created on a specific website ...
I've been facing challenges while working with ngFormModel and dynamic properties from classes. Despite my efforts, I'm unable to update the ngFormModel when changing variables to reflect new values. You can see an example of this issue in the fo ...
Experiencing a flickering issue with the fixed menubar and easyResponsiveTabs.js in my project when scrolling down. Attempted to resolve it using jquery.noConflict(), but without success. Would appreciate any guidance on how to address this problem. ...
Currently, I am utilizing apexcharts(version 3.35.3) within an Angular project and I am looking to adjust the width of the box. After reviewing the documentation for apexcharts, I have not been able to find any specific option that allows me to modify the ...
After successfully making a GET request to an API, I am now looking for a way to display the response on a Jade page. Below is the code snippet from 'index.js' located in the routes folder where the GET request is implemented. Any suggestions on ...
I seem to be having an issue with my PUT request. While all my other requests are functioning properly, the req.body appears to remain empty, causing this error message to occur: errmsg: "'$set' is empty. You must specify a field like so: ...
I recently moved my website from to using the Duplicator plugin, but I'm facing an issue with the custom font 'Kanit' not displaying correctly. I have double-checked on the backend and confirmed that Kanit font is properly set up. Below i ...
I am currently in the process of developing an automated test suite using Cucumber, Java, and Playwright. I have utilized a template from github.com/akshayp7/playwright-java-cucumber as my starting point. Upon updating Playwright to the latest version in ...
export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...
I am currently working on a grid layout consisting of 9 div tags, creating 3 rows with 3 divs in each row. Within this grid, each div is supposed to have a background image, except for the second div in the second row. My main challenge lies in getting th ...
Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...
Struggling to find a way forward, I've come across 4-5 JSON files with similar structures but different values. My goal is to load the appropriate JSON file based on a value stored in localStorage. Currently, I am loading a file at the top: import * ...
Check out the repository for my project at https://github.com/Shahidkhan0786/kharidLoapp Within the project, the @types folder contains a file named (express.d.ts) where I have added some types in response. The (express.d.ts) file within the @types folde ...
I need the aside to be positioned on the right side and the section on the left side, both centered in the space. Feel free to check out this link <!DOCTYPE html> <html> <head> <style> #main { width: 800px; margin: 0 auto; } ...
Hello, I am experiencing an issue with retrieving data from a URL in my Ionic application. When using @angular/http to fetch a JSON object from the URL, everything works fine in the browser when running 'ionic serve'. However, when deploying the ...
I've been revisiting an old project recently and trying to debug/restore it, but it's been quite challenging. Although I managed to install most dependencies, I keep running into issues when trying to install chartjs-node. My setup includes node ...
Facing an Issue After creating a basic CRUD API, I delved into writing tests using chai and chai-http. However, while running the tests using $ mocha, I encountered a problem. Upon executing the tests, I received the following error in the terminal: Ty ...
Someone recommended incorporating Continuous Integration for a pre-existing application (FrontEnd: Node.js - BackEnd: .Net API). At the moment, the API endpoints are hardwired in the .js files which become minified after being built using webpack. I plan ...