[angular] Proper way to load node_module fonts(.svg,...) and image assets

[kennyevans]

Description

angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ngx-incwallet": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "ngx-build-plus:browser", "options": { "aot": false, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico", "src/favicon.png", { "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "/assets/img/markers" } ], "styles": [ "node_modules/ngx-toastr/toastr.css", "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/typeface-exo/index.css", "node_modules/roboto-fontface/css/roboto/roboto-fontface.css", "node_modules/ionicons/scss/ionicons.scss", "node_modules/@fortawesome/fontawesome-free/css/all.css", "node_modules/socicon/css/socicon.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "node_modules/leaflet/dist/leaflet.css", "src/app/@theme/styles/styles.scss" ], "scripts": [ "node_modules/pace-js/pace.min.js", "node_modules/tinymce/tinymce.min.js", "node_modules/tinymce/themes/modern/theme.min.js", "node_modules/tinymce/plugins/link/plugin.min.js", "node_modules/tinymce/plugins/paste/plugin.min.js", "node_modules/tinymce/plugins/table/plugin.min.js" ] },

Usage <i class="control-icon ion ion-android-menu"></i> <img src="assets/images/no_pic.png" height="30" width="30">

I'm using ionicons@2.0.1 package as the icon fonts, load image from assets folder as above but both ways seem not give me the correct result. Any proper way to handle the icon or images?

Expected behaviour The correct icon and images being rendered

Screenshots

System Details

Name	Value
Wails Version	v1.9.1
Go Version	go1.15.4
Platform	linux
Arch	amd64
GO111MODULE	on
GCC	9.3.0
Npm	6.14.4
Node	v10.19.0

[leaanthony]

Embedding assets is down to your preference in bundler. The default angular template uses a webpack config that should just work but it would be worth checking.

[kennyevans]

@leaanthony the assets not bundled to the js file and just a copy of stand-alone files in the dist folder i.e. dist/ionicons.svg, dist/assets/no_pic.png... instead. I'm using default angular cli for the bundler. Any missing configuration or should we use the webpack?

[leaanthony]

I'd use webpack in your situation. There's tons of plugins to embed resources if thatms what you want.

[leaanthony]

@kennyevans just going over this. Are you saying the default webpack configuration is not bundling your assets properly? If so, that is a template problem and we can fix that.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.