build does not take into account folders when dealing with svg

Bug Report or Feature Request (mark with an `x`)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an `x`)

- [ ] new
- [ X] build
- [ X] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Windows 10

C:\Users\Owner
λ node --version
v8.11.1

C:\Users\Owner
λ npm --version
5.3.0

C:\Users\Owner
λ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.1
Node: 8.11.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.1
@angular-devkit/core         0.7.1
@angular-devkit/schematics   0.7.1
@schematics/angular          0.7.1
@schematics/update           0.7.1
rxjs                         6.2.2
typescript                   2.7.2

Repro steps

ng new bug-so
cd bug-so
npm install flag-icon-css

In angular.json, I added the CSS:

        "styles": [
          "src/styles.css",
          "node_modules/flag-icon-css/css/flag-icon.min.css"
        ],

In app.component.html

<div style="padding: 5em">
  <span class="flag-icon flag-icon-es" style="border: 1px solid black"></span><br/>
  <span class="flag-icon flag-icon-fr" style="border: 1px solid black"></span><br/>
</div>

Run the app

ng serve

The log given by the failure

N/A

Desired functionality

The spanish flag is interpreted as:

.flag-icon-es {
    background-image: url(es.svg);
}

because the size of es.svg is more than 10KB. The issue is that the library has several es.svg files. In my case this is not the one referenced by the CSS.

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir node_modules\flag-icon-css\flags\1x1\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\node_modules\flag-icon-css\flags\1x1

09/06/2018  08:04 AM            12,214 es.svg
               1 File(s)         12,214 bytes
               0 Dir(s)  47,793,385,472 bytes free

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir node_modules\flag-icon-css\flags\4x3\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\node_modules\flag-icon-css\flags\4x3

02/22/2018  04:19 PM           145,196 es.svg
               1 File(s)        145,196 bytes
               0 Dir(s)  47,793,385,472 bytes free

After the ng build command, the dist folder selects the first es.svg and not both.

k:\home\projects\stable\playground\angular\experiment (master -> origin)
λ dir dist\experiment\es.svg
 Volume in drive K is New Volume
 Volume Serial Number is 92EC-8912

 Directory of k:\home\projects\stable\playground\angular\experiment\dist\experiment

09/06/2018  11:14 AM            12,214 es.svg
               1 File(s)         12,214 bytes
               0 Dir(s)  47,793,385,472 bytes free

Mention any other details that might be useful

You see visually the issue at https://stackoverflow.com/questions/52192974/angular-data-urls-processing/52194037

Had a look and can confirm that I see the 1x1 (square) ES flag instead of the 4x3 (rectangular) one, while the source CSS rule should load the 4x3 one:

.flag-icon-es {
  background-image: url(../flags/4x3/es.svg);
}

I think this is because of bad/missing duplicate handling in our CSS pipeline.

@filipesilva

@filipesilva This is due to

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

Line 74 in f7f1d13

filename: `[name]${hashFormat.file}.[ext]`,

we can add [path] or something similar but it will be a breaking change as the output structure won't be flat anymore.

This is an issue for me too. I'm using ag-grid and the only way (without ejecting webpack config) is to have multiple folders of icons, named the same but with different colors.

e.g. I have light and dark folders
url(./material-icons-dark/menu.svg)
url(./material-icons-light/menu.svg)

In previous version of cli (6.1.2), these svg icons were inlined which worked.
With cli 7.0, they are not inlined and only one of the two icons is output in the dist folder.

Here's a reference to the ag grid icon theme issue ag-grid/ag-grid#2151

Hoping to show this issue might have a higher frequency than as tagged.

You can set outputHashing to media. This was the default in the past and will prevent identically named files from overwriting each other (unless the content is identical which is actually favorable).

I don't see how comments here resolve #19850, which was closed as duplicate of this, while it's only a special case of #19850.

I don't see how comments here resolve #19850, which was closed as duplicate of this, while it's only a special case of #19850.

Kindly see #12186 (comment) for a workaround.

I don't see how comments here resolve #19850, which was closed as duplicate of this, while it's only a special case of #19850.

Kindly see #12186 (comment) for a workaround.

How can I set outputHashing to media for ng serve? I don't want to run ng serve --prod.

You can set any option, in the options section.

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
       ...
      "outputHashing": "media"
    },
    "configurations": {
      "production": {
          ...
      }
    }
  },

It doesn't work there, at least for ng serve. However, it applies for ng serve --prod, which I didn't want to use. But even this doesn't help. I'm receiving this in console.

Warning: 'outputHashing' option is disabled when using the dev-server.
...
Warning: Conflict: Multiple assets emit different content to the same filename logo.png

I also tried to set it in serve options, but it's not allowed there.

fix(@angular-devkit/build-angular): allow emitting multiple files wit…

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

build does not take into account folders when dealing with svg #12186

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

build does not take into account folders when dealing with svg #12186

Description

Bug Report or Feature Request (mark with an x)

Command (mark with an x)

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

Activity

filipesilva commented on Sep 7, 2018

alan-agius4 commented on Sep 7, 2018

jzahka commented on Oct 25, 2018

clydin commented on Oct 25, 2018

maks-humeniuk commented on Jan 22, 2021

alan-agius4 commented on Jan 22, 2021

maks-humeniuk commented on Jan 22, 2021

alan-agius4 commented on Jan 22, 2021

maks-humeniuk commented on Jan 25, 2021

angular-automatic-lock-bot commented on Feb 28, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Bug Report or Feature Request (mark with an `x`)

Command (mark with an `x`)