Exploring methods for handling svgs incorporated in angular.js templates with webpack

I'm currently working on cache-busting my SVGs and other files like translation JSON.

The issue I'm facing is that webpack does not seem to recognize imported svgs in the following format:

<md-icon md-svg-src="assets/icons/ic-edit.svg"></md-icon>

I am looking for a way to hash the file names so using CopyWebpackPlugin to copy and hash assets won't work, as it would require manual updates within the markup.

{
   test: /\.svg$/,
   loader: 'file-loader',
   options: {
     name(file) {
        // The console doesn't log anything as it's not detecting urls within Angular templates
        console.log(file); 
        return '[name]-[hash].[ext]'
    }
  }
}

What are my options for handling SVG files within my application? It seems like a significant task to refactor all of the SVGs from template usage to importing them in JavaScript and utilizing them inline. Is there another solution available or is this the best approach?

javascriptangularjswebpack

Answer №1

After some trial and error, I successfully configured webpack to process svgs. It was a bit of a journey getting there, especially since this is based on webpack2 and adaptations may be needed for different webpack versions.

  1. To make angular work with svg icons, I had to define custom src attributes
  2. I had to specify when the HTML should start parsing absolute paths using root
  3. I included a name property for assets and utilized file loader for this purpose

I also had to adjust my asset paths from:

"assets/icons/ic-edit.svg"

"/assets/icons/ic-edit.svg"

{
  module: {
    loaders: [
      {
        test: /\.html$/,
        loaders: 'html-loader',
        options: {
          attrs: ['md-icon:md-svg-src', ':ng-src'],
          root: path.resolve(__dirname, '../src'),
          name: '[name]-[hash].[ext]'
        }
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name]-[hash].[ext]'
        }
      }   
    ],
  }
}

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

Using AngularJS Services to Share Objects Between Views and Controllers

I'm finding it difficult to grasp the concept of AngularJS services as I am fairly new to AngularJS. My goal is to pass a nested object between two controllers/views. In my home page partial, I have a section that displays the project and task. hom ...

javascriptangularjsangularjs-servicengroute

Retrieve the auto-filled value from the input field within the controller

Here is the code snippet from my view: <label for="txtFrom">Pickup Location</label> <input type="text" id="pickup" placeholder="Address, airport, train station, hotel..." ng-model="pickup"> <label for="txtDestination">Destination& ...

angularjs

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

Enhancing the performance of jquery selection speed

I am currently working on a code that manipulates the HTML code of an asp.net treeview. Since this code runs frequently, I need to ensure that it executes with maximum speed. I am interested in expanding my knowledge on jQuery selectors and optimizing th ...

javascriptjqueryhtmlperformancecpu-speed

Find the name of the class using JavaScript

Is there a more elegant way to retrieve the class name of a class in JavaScript? I have implemented a method and would like to log any errors with a message indicating the class in which the error occurred. My current solution feels a bit "dirty": I am s ...

javascriptclassoop

Troubleshooting connection timeouts between node.js and amqp

In my project, I am utilizing RabbitMQ through the AMQP module in Node.js with 2 producers and 2 consumers. Here is the code snippet for establishing connections for the consumers: function init_consumers( ) { console.log( 'mq: consumers connect ...

javascriptnode.jsrabbitmqamqp

Transmit information to an AngularJS application instantly

Looking for a solution to keep my AngularJS app displaying real-time data without constantly querying my api. Is there a way to establish a connection between my server and the AngularJS app so that new data can be pushed from the server to the app for dis ...

angularjsnode.jsreal-time

Instructions for transforming rows into columns in JSON format

Looking to convert an array of JSON objects into a format where rows become columns and the values at the side become column values, similar to the crosstab function in PostgreSQL. The JSON data looks something like this: {"marketcode":"01","size":"8,5", ...

javascriptarraysjson

Managing websites on Android when the keyboard is displayed

I am currently facing an issue with my webpage on Android (Galaxy SIII). The problem occurs when visitors try to enter their email in the form at the bottom of the page. The keyboard becomes visible, causing the design to look messy. When using Chrome, the ...

javascriptandroidhtmlcss

Dynamic file name and title for jQuery Datatables Export Buttons

I am utilizing jQuery datatable along with Export buttons. When adjusting the filename and title, I encounter an issue. The problem lies in my desire for the title to be dynamic, depending on the applied filters and custom ones. Additionally, configurin ...

javascriptjqueryangularjsdatatables

Determining the Clicked Button in React When Multiple Buttons are Present

Within my functional component, I have a table with rows that each contain an edit button. However, when I click on one edit button, changes are applied to all of them simultaneously. How can I identify which specific button was clicked and only apply chan ...

javascriptreactjs

Guide for displaying and hiding an image using a button or link in Next.js

I'm a beginner with React and Next.js, and I have the following code snippet: import Link from 'next/link'; import Image from 'next/image'; async function getPokedex() { const response = await fetch(`http://localhost:3000/api/p ...

javascriptreactjsnode.jsnext.js

The script fails to execute upon the loading of the view

I am facing an issue with a simple JavaScript code that aims to target an element within an angular view: var buttons = document.querySelectorAll('.msg-type i'); console.log(buttons.length); When I run this code, it incorrectly prints out 0 on ...

javascriptangularjs

A tip for transferring the value of a binding variable to a method within the template when the button is clicked

I am currently exploring the concept of binding between parent and child components using @Input, @Output, and EventEmitter decorators. This is demonstrated in the HTML snippet below: <h1 appItemDetails [item]="currentItem">{{currentItem}}& ...

javascriptnode.jsangulartypescriptangular-directive

Unravel the JSON structure

Here is the JSON response I received from an AJAX call: [{"id":null,"period":null,"until":null,"agent_id":"15","agent_zlecajacy_id":"15","offer_id":null,"status":"1","tytul":"Pobranie ksi\u0105g","tresc":"Pobranie ksi\u0105g","data_aktualizacji" ...

javascriptjqueryjson

Troubleshooting Problem with Website Responsiveness on iPhones Using Bootstrap 5

I am currently experiencing a challenge involving the responsiveness of a website I am developing, particularly when it comes to iPhones. The site utilizes Bootstrap 5 and displays correctly on Android devices and in Chrome Dev Tools. However, upon testing ...

javascripthtmlcssiphonebootstrap-5

Send backspace key press event to the applet and prevent it from continuing

I am struggling with a Java applet on my webpage that allows users to edit text. Whenever a user tries to modify the text by pressing the backspace button, the browser mistakenly forwards to the previous page. I attempted to filter out the backspace key pr ...

javascriptdom-events

Displaying Angular UI Views: A Comparison of Old and New Views During View Transition in Firefox

I am currently facing an issue with my AngularJS application that uses UI router. While the application works perfectly fine in Chrome, it encounters problems in Firefox. The issue arises when a state is changed, leading to the DOM displaying 2 ui-views - ...

angularjsfirefoxangular-ui-router

Addressing Equity Concerns within JavaScript Programming

I can't figure out why the final line in this code snippet is returning false. Is it not identical to the line above? const Statuses = Object.freeze({ UNKNOWN : 0, OK : 1, ERROR : 2, STOPPED : 3 }); class myStatus extends Object{ co ...

javascript

As the user types, automatically format the input field for a seamless and intuitive experience

My current application is running on Angular 1.3.10 I have implemented a jQuery function to automatically add a backslash to the expiration input field once the user types the third number. Although it was a quick fix, I now aim to move this functionality ...

javascriptangularjsangularjs-directiveangularjs-scope