A shared place for images and fonts

[tjvantoll]

If I want to share images/fonts between my web and native apps I need to put them in the src/app folder, as otherwise the {N} app won’t be able to access them.

Angular web apps expect their images/fonts to be in the src/assets folder.

I’m not sure how to best consolidate this. My solution was to create both src/app/fonts and src/app/images folders, and to add both to the "assets" in my angular.json file. We might want to consider doing these steps by default.

[y16i]

I could handle the issue to update the below section in webpack.config.js. It worked on Android, I don't check on iOS.

I stored ttf and png under src/assets/ e.g.) src/assets/images/menu.png src/assets/fonts/FontAwesome.ttf

The original webpack.config.js;

new CopyWebpackPlugin([
    { from: "fonts/**" },
    { from: "**/*.jpg" },
    { from: "**/*.png" },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

Updated webpack.config.js

new CopyWebpackPlugin([
    { from: "**/*.ttf", to: "fonts/", flatten: true },
    { from: "**/*.jpg" },
    { from: "**/*.png" },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),

To verify; tns build android --bundle

Check this path after build; platforms/android/app/src/main/assets/app/assets platforms/android/app/src/main/assets/app/fonts

tns.html code

<Image src="~/assets/images/menu.png"></Image>