angular-material-extensions / select-country

Angular Material component that allow users to select a country or nationality with an autocomplete feature
https://angular-material-extensions.github.io/select-country/
MIT License
126 stars 40 forks source link

SVG flags can't be retrieved #76

Open wadie opened 3 years ago

wadie commented 3 years ago

Describe the bug Created a fresh Angular 9 project with material, getting following error for all flags Error: Error retrieving icon :bl! <svg> tag not found

To Reproduce Steps to reproduce the behavior: Go to https://stackblitz.com/edit/angular-9-material-starter-4fd9kj?file=angular.json I created a stackblitz where you can reproduce the issue. it's a clean Angular 9 installation with material

Expected behavior For the flags to load

morrowyn commented 3 years ago

Experiencing the same with angular 12 and @angular-material-extensions/select-country": "^5.0.1" "svg-country-flags": "^1.2.10" The assets are not copied to the src/assets directory, they remain inside the node_modules directory.

waelbenmustapha commented 3 years ago

still not fixed i had to copy paste them manually so they work

leibovitzgil commented 3 years ago

the problem is with the output path when the svg resources are being copied from the node_modules to the local assets. try changing it to the following setup (in angular.json under assets section):

{
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg/",
                "output": "./assets/svg-country-flags/svg/"
              }

that should solve your problem.

@AnthonyNahas - what's the procedure to contribute to this project, I can open PR

TonyGolem commented 2 years ago

the problem is with the output path when the svg resources are being copied from the node_modules to the local assets. try changing it to the following setup (in angular.json under assets section):

{
                "glob": "**/*",
                "input": "./node_modules/svg-country-flags/svg/",
                "output": "./assets/svg-country-flags/svg/"
              }

that should solve your problem.

@AnthonyNahas - what's the procedure to contribute to this project, I can open PR

Great Solution, 17/06/22 works

AnthonyNahas commented 2 years ago

a PR would be appreciated 🙏

mindarchitect commented 2 years ago

In my case the problem was with base URL interceptor. So, gentle hint: if svg images are available under assets, check if some interceptor does not modify assets folder URL while loading them. Good luck!

salmankhaled-egabi commented 1 year ago

Describe the bug Created an Angular 14 project with material, getting following error for all flags handleError Error: Error retrieving icon :af! this.tokenGetter is not a function and no flag loaded for any country.