starred/flag-icons
1
0
Fork 0
mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 17:35:54 +03:00
Code Issues 33 Projects Releases 5 Packages Wiki Activity

[GH-ISSUE #431] Failing build some country icons because of unresolved '%23b' #263

New issue
Closed
opened 2026-03-03 14:35:54 +03:00 by kerem · 12 comments
kerem commented 2026-03-03 14:35:54 +03:00
Owner
Copy link

Originally created by @aligit on GitHub (Feb 21, 2018).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/431

Despite successfull npm install, some countries such as nu.svg, nz.svg, np.svg are causing npm start failure.

Here is the error I'm getting:

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/flag-icon-css/css/flag-icon.css
(Emitted value instead of an instance of Error) CssSyntaxError: F:\repositories\platformui\node_modules\flag-icon-css\css\flag-icon.css:1042:1393: Can't resolve '%23c' in 'F:\repositories\platformui\node_modules\flag-icon-css\css'

If I comment these flags in node_modules, the server successfully starts.

Environment:
Windows 10
npm --version 5.6.0

Below is the package.json:


{
  "name": "indigitaUI",
  "version": "1.0.0-snapshot",
  "description": "indigita UO",
  "author": "indigita SA",
  "url": "https://www.indigita.ch",
  "copyright": "",
  "license": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/common": "5.1.0",
    "@angular/compiler": "5.1.0",
    "@angular/core": "5.1.0",
    "@angular/forms": "5.1.0",
    "@angular/http": "5.1.0",
    "@angular/platform-browser": "5.1.0",
    "@angular/platform-browser-dynamic": "5.1.0",
    "@angular/router": "5.1.0",
    "@angular/upgrade": "5.1.0",
    "@swimlane/ngx-charts": "^7.0.1",
    "angular2-jwt": "0.2.3",
    "bootstrap": "^4.0.0-beta",
    "chart.js": "2.7.1",
    "core-js": "2.5.1",
    "d3": "^4.12.0",
    "flag-icon-css": "^2.9.0",
    "jquery": "^3.2.1",
    "moment": "2.19.3",
    "ng2-charts": "1.6.0",
    "ngx-bootstrap": "2.0.0-beta.10",
    "popper.js": "^1.12.9",
    "primeng": "^5.0.2",
    "rxjs": "5.5.5",
    "spinkit": "1.2.5",
    "tether": "^1.4.3",
    "ts-helpers": "1.1.2",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.2",
    "@angular/compiler-cli": "5.1.0",
    "@types/jasmine": "2.8.2",
    "@types/node": "8.0.56",
    "codelyzer": "4.0.1",
    "jasmine-core": "2.8.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "1.3.0",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.2.1",
    "ts-node": "3.3.0",
    "tslint": "5.8.0",
    "typescript": "2.4.2"
  }
}
Originally created by @aligit on GitHub (Feb 21, 2018). Original GitHub issue: https://github.com/lipis/flag-icons/issues/431 Despite successfull npm install, some countries such as nu.svg, nz.svg, np.svg are causing npm start failure. Here is the error I'm getting: > ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/flag-icon-css/css/flag-icon.css (Emitted value instead of an instance of Error) CssSyntaxError: F:\repositories\platformui\node_modules\flag-icon-css\css\flag-icon.css:1042:1393: Can't resolve '%23c' in 'F:\repositories\platformui\node_modules\flag-icon-css\css' If I comment these flags in node_modules, the server successfully starts. Environment: Windows 10 npm --version 5.6.0 Below is the package.json: ```json { "name": "indigitaUI", "version": "1.0.0-snapshot", "description": "indigita UO", "author": "indigita SA", "url": "https://www.indigita.ch", "copyright": "", "license": "", "scripts": { "ng": "ng", "start": "ng serve --proxy-config proxy.conf.json", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "5.1.0", "@angular/common": "5.1.0", "@angular/compiler": "5.1.0", "@angular/core": "5.1.0", "@angular/forms": "5.1.0", "@angular/http": "5.1.0", "@angular/platform-browser": "5.1.0", "@angular/platform-browser-dynamic": "5.1.0", "@angular/router": "5.1.0", "@angular/upgrade": "5.1.0", "@swimlane/ngx-charts": "^7.0.1", "angular2-jwt": "0.2.3", "bootstrap": "^4.0.0-beta", "chart.js": "2.7.1", "core-js": "2.5.1", "d3": "^4.12.0", "flag-icon-css": "^2.9.0", "jquery": "^3.2.1", "moment": "2.19.3", "ng2-charts": "1.6.0", "ngx-bootstrap": "2.0.0-beta.10", "popper.js": "^1.12.9", "primeng": "^5.0.2", "rxjs": "5.5.5", "spinkit": "1.2.5", "tether": "^1.4.3", "ts-helpers": "1.1.2", "zone.js": "0.8.18" }, "devDependencies": { "@angular/cli": "^1.4.2", "@angular/compiler-cli": "5.1.0", "@types/jasmine": "2.8.2", "@types/node": "8.0.56", "codelyzer": "4.0.1", "jasmine-core": "2.8.0", "jasmine-spec-reporter": "4.2.1", "karma": "1.7.1", "karma-chrome-launcher": "2.2.0", "karma-coverage-istanbul-reporter": "1.3.0", "karma-jasmine": "1.1.1", "karma-jasmine-html-reporter": "0.2.2", "protractor": "5.2.1", "ts-node": "3.3.0", "tslint": "5.8.0", "typescript": "2.4.2" } } ```
kerem closed this issue 2026-03-03 14:35:55 +03:00
kerem commented 2026-03-03 14:35:55 +03:00
Author
Owner
Copy link

@griffiti commented on GitHub (Feb 21, 2018):

I'm getting the same error.

Environment:
Windows 10
Node 9.5.0

Error:
ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/flag-icon-css/css/flag-icon.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\dev\projects\simpliq-full\node_modules\flag-icon-css\css\flag-icon.css:166:399: Can't resolve '%23a' in 'C:\dev\projects\simpliq-full\node_modules\flag-icon-css\css'

Occurring for the following countries:
np
nu
nz
sl
za
bj

<!-- gh-comment-id:367372099 --> @griffiti commented on GitHub (Feb 21, 2018): I'm getting the same error. **Environment:** Windows 10 Node 9.5.0 **Error:** ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/flag-icon-css/css/flag-icon.css (Emitted value instead of an instance of Error) CssSyntaxError: C:\dev\projects\simpliq-full\node_modules\flag-icon-css\css\flag-icon.css:166:399: Can't resolve '%23a' in 'C:\dev\projects\simpliq-full\node_modules\flag-icon-css\css' Occurring for the following countries: np nu nz sl za bj
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@aldenteTarnow commented on GitHub (Feb 21, 2018):

Despite the error. How do you include and use flags with angular?? Are you guys using angular 5? Can someone guide me how to???

<!-- gh-comment-id:367479462 --> @aldenteTarnow commented on GitHub (Feb 21, 2018): Despite the error. How do you include and use flags with angular?? Are you guys using angular 5? Can someone guide me how to???
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@griffiti commented on GitHub (Feb 21, 2018):

I'm using Angular 5.2.5. Here's how the flags are being used:

<i class="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>

<!-- gh-comment-id:367491947 --> @griffiti commented on GitHub (Feb 21, 2018): I'm using Angular 5.2.5. Here's how the flags are being used: `<i class="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>`
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@lipis commented on GitHub (Feb 22, 2018):

Can you have the minimum number of dependencies that are causing this error?

<!-- gh-comment-id:367546323 --> @lipis commented on GitHub (Feb 22, 2018): Can you have the minimum number of dependencies that are causing this error?
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@kloasn commented on GitHub (Feb 22, 2018):

Updating to the latest version of angular/cli (1.7.1) resolves the issue.

<!-- gh-comment-id:367620187 --> @kloasn commented on GitHub (Feb 22, 2018): Updating to the latest version of angular/cli (1.7.1) resolves the issue.
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@aligit commented on GitHub (Feb 22, 2018):

I manage to fix it by restoring package-lock.json. I've also upgraded my @angular/cli from 1.4.2 to 1.6.0

<!-- gh-comment-id:367622420 --> @aligit commented on GitHub (Feb 22, 2018): I manage to fix it by restoring package-lock.json. I've also upgraded my @angular/cli from 1.4.2 to 1.6.0
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@lipis commented on GitHub (Feb 22, 2018):

so I guess we can close this issue?

<!-- gh-comment-id:367637184 --> @lipis commented on GitHub (Feb 22, 2018): so I guess we can close this issue?
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@aligit commented on GitHub (Feb 22, 2018):

For me that's fine. @griffiti did you manage to fix it by upgrading your angular.

<!-- gh-comment-id:367703654 --> @aligit commented on GitHub (Feb 22, 2018): For me that's fine. @griffiti did you manage to fix it by upgrading your angular.
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@stychu commented on GitHub (Feb 23, 2018):

@griffiti

I'm using Angular 5.2.5. Here's how the flags are being used:
<i class="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>

And how to include the library to be able to use the css?

<!-- gh-comment-id:367996346 --> @stychu commented on GitHub (Feb 23, 2018): @griffiti >I'm using Angular 5.2.5. Here's how the flags are being used: >`<i class="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>` And how to include the library to be able to use the css?
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@kaleidocore commented on GitHub (Mar 24, 2018):

I too can confirm that updating to angular/cli 1.7.3 resolved the issue. In fact, I just ran
npm update
in my angular project folder, and bunch of stuff got upgraded and the compile errors disappeared.

@stychu

And how to include the library to be able to use the css?

I'm using the latest Angular 5 SPA template.

  1. Install the module with npm:

npm install flag-icon-css

  1. For testing purposes you can add it globally in styles.css:

@import "~flag-icon-css/css/flag-icon.css";

  1. Finally, just use the tag in your html, e.g. in home.component.html:

<span class="flag-icon flag-icon-se flag-icon-squared"></span>

<!-- gh-comment-id:375911212 --> @kaleidocore commented on GitHub (Mar 24, 2018): I too can confirm that updating to angular/cli 1.7.3 resolved the issue. In fact, I just ran `npm update` in my angular project folder, and bunch of stuff got upgraded and the compile errors disappeared. @stychu > And how to include the library to be able to use the css? I'm using the latest Angular 5 SPA template. 1. Install the module with npm: `npm install flag-icon-css` 2. For testing purposes you can add it globally in styles.css: `@import "~flag-icon-css/css/flag-icon.css";` 3. Finally, just use the tag in your html, e.g. in home.component.html: `<span class="flag-icon flag-icon-se flag-icon-squared"></span>`
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@sushil302 commented on GitHub (Jun 28, 2018):

@lipis @kaleidocore Hi i am using Angularjs 1.3.13 and using flag-icon-css i am only able to display us and gb flag and not able to display any other flags. i tried doing npm update but didnt work for me.
Anyone know solution on it?

<!-- gh-comment-id:401148254 --> @sushil302 commented on GitHub (Jun 28, 2018): @lipis @kaleidocore Hi i am using Angularjs 1.3.13 and using flag-icon-css i am only able to display us and gb flag and not able to display any other flags. i tried doing npm update but didnt work for me. Anyone know solution on it?
kerem commented 2026-03-03 14:35:56 +03:00
Author
Owner
Copy link

@lipis commented on GitHub (Sep 26, 2018):

Not sure what we can do here.. seems fine from my end :)

<!-- gh-comment-id:424798270 --> @lipis commented on GitHub (Sep 26, 2018): Not sure what we can do here.. seems fine from my end :)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
dependabot/npm_and_yarn/prettier-3.8.3
dependabot/npm_and_yarn/follow-redirects-1.16.0
dependabot/npm_and_yarn/sass-1.99.0
dependabot/npm_and_yarn/svgo-4.0.1
v7.5.0
v7.4.0
v7.3.2
v7.3.1
v7.3.0
v7.2.4
v7.2.3
v7.2.2
v7.2.1
v7.2.0
v7.1.0
v7.0.3
v7.0.2
v7.0.1
v7.0.0
v6.15.0
v6.14.0
v6.13.2
v6.13.1
v6.13.0
v6.12.0
v6.11.2
v6.11.1
v6.11.0
v6.10.1
v6.10.0
v6.9.5
v6.9.4
v6.9.3
v6.9.2
v6.9.1
v6.9.0
v6.8.0
v6.7.0
v6.6.6
v6.6.5
v6.6.4
v6.6.3
v6.6.2
v6.6.1
v6.6.0
v6.5.1
v6.5.0
v6.4.6
v6.4.5
v6.4.4
v6.4.3
v6.4.2
v6.4.1
v6.4.0
v6.3.0
v6.2.0
v4.1.5
v4.1.4
v4.1.3
v4.1.2
v4.1.1
v4.1.0
3.5.0
3.4.6
3.4.5
3.4.4
3.4.3
3.4.2
3.4.1
3.4.0
3.3.0
3.2.1
3.2.0
3.1.0
3.0.0
2.9.0
2.8.0
2.7.0
2.6.0
2.5.0
2.4.0
2.3.1
2.3.0
2.2.0
2.1.0
2.0.0
1.4.0
1.3.0
1.2.0
1.1.0
1.0.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
v0.8.1
0.8.0
0.7.1
0.7.0
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.0
0.2.0
0.1.0
Labels
Clear labels   
3rd-party

   
3rd-party

   
bug

   
code

   
documentation

   
enhancement

   
fixed-in-master

   
flag-request

   
help needed

   
missing-flag

   
missing-flag

   
pull-request

Mirrored from GitHub Pull Request

  
wrong-flag

   
wrong-flag
No labels
3rd-party
3rd-party
bug
code
documentation
enhancement
fixed-in-master
flag-request
help needed
missing-flag
missing-flag
pull-request
wrong-flag
wrong-flag
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/flag-icons#263
No description provided.