Angular-cli: build does not take into account folders when dealing with svg

[sydneyhenrard]

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

[filipesilva]

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.

[alan-agius4]

@filipesilva This is due to
https://github.com/angular/angular-cli/blob/f7f1d139f4eda6652a44f34cb682af4966159e63/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts#L74
we can add [path] or something similar but it will be a breaking change as the output structure won't be flat anymore.

[jzahka]

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 https://github.com/ag-grid/ag-grid/issues/2151

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

[clydin]

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).