PROBLEM OBSERVATION
I'm trying to eagerly load the app and the it's images. In Google Chrome I can set the Ionic4/Angular8 PWA to offline. I still can browse all the pages since I loaded them lazy - AND - the PreloadAllModules is imported to the app-routing.module.ts
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
However, the icons, which I use <ion-icon slot="start" name="Notifications"></ion-icon> are not prefetched and thus will not appear in offline mode (if the page was not visited before).
I do understand that prefetched images need to be set in the ngsw-config.json file, which will be turned into the ngsw.json after the build command run. That file lists all the images and other statics to prefetch.
DEAD-END APPROACHES with the ngsw-config.json
I quickly thought about prefetching the entire svg folder. That is almost half a MB.
Adding each single image to the ngsw-config.json file. Cumbersome and prone to forget new icons.
QUESTION
Is there a specific Ionic 4 approach to this that detects what icons to prefetch?
Any Angular 8 approach to this?
Related
I'm using Vue 3 along with Tailwind and in my template I display a list of background images, so I'm looping through an array of images and this div is responsible for showing them:
<div :class="`h-full bg-[url('#/assets/img/${article.preview_image}')] bg-center bg-no-repeat bg-cover hover:scale-105 transition duration-[2000ms] ease-in-out`" />
This way it doesn't work although I have no errors in the console and when I check the DOM it's rendered alright, the images just don't show up
The weird part is that when I hard code the name of the image like bg-[url('#/assets/img/my_image.jpg')] it works, and when I go back to using my loop variable it still works although it was not working at first, and it's not cache related because I disabled it
And then when I restart the server the images are gone again
Any idea what's causing this?
By the way, the data comes from a data.json file, if it matters. Like:
[
{ preview_image: 'xxx.jpg'},
{ preview_image: 'xxx.jpg'}
{ preview_image: 'xxx.jpg'}
]
I tried to use a .ts file instead but the problem remains
This may be a webpack issue where your image files are not bundled correctly. I se you have tried a .ts file. Can you try again but use require("filePath"), with the image files. This ensures that the files are bundled.
Cheers :)
I am adding a snippet from this codepen https://codepen.io/soulwire/pen/Ffvlo to display a particle animation. I'm adding it like this in my nuxt.config.js file:
plugins: [
{ src:'~/plugins/particles.js', mode:'client'}
],
It shows up and works but unfortunately the performance is so bad that the animation is not really perceivable as it should be. Is there anything I could do differently so that the performance is the same as on the codepen?
Also i am aware that this is now registered as a global plugin and always loaded. Is there a way to add it only to a specific site?
Thanks in advance!
I recently started creating a new Vue.js app with Nuxtjs. I truly love the capabilities that it has right out of the box, but size of the app is quite large. Even when I create a completely new app with npx create-nuxt-app and only include Vuetify and dotenv is the size of this new app more than 1MB!
Changing '#nuxtjs/vuetify to ['#nuxtjs/vuetify', { treeShake: true }] does not seem to make a difference and adding extractCSS: true to the build property decreases the size of vedors.app from >600kb to <300kb. This is a big improvement, but the final bundle size is still really large. Especially because I did not add anything since npx create-nuxt-app, so the site has only 2 pages (index and inspire).
My question is, how can I decrease the bundle size, and more specifically:
how can I remove unused Vuetify components
Remove unused core-js/modules
Find other modules that are not used and remove them from the build package
I have got two components in vue, one with lightbox for images and one for playing audio. I got relative links to the assets but either the images or the audio is being displayed and played. First I thought it was an issue with the component itself but since it doesnt work on either of these it might be something else.
If I provide an absolut url it works however fine for some reason
This doesnt work either when I build the application or locally:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "../assets/music/myfile.mp3",
// LITEBOX
images: [
".../assets/img/myimage.jpg",
This works fine:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "http://mypage.com/music/myfile.mp3",
// LITEBOX
images: [
"http://mypage.com/img/myimage.jpg",
I can of course upload the images and music separate and make it work but it feels a bit inconvenient.
What can be wrong?
UPDATE:
Thanks for the answers. Now I got two methods. And both actually works.
One is to put all my assets in the public folder. That solved it with a link like:
"/assets/img/myimage.jpg",
The other way is to using require.
require("../assets/img/myimage.jpg"),
Both works but is there a prefered way?
You should use require when using assets
file1: require("../assets/music/myfile.mp3")
Without require webpack won’t know that you want to bundle that asset and your path will remain unchanged. Actually webpack knows how to handle this kind of files thru the use of plugins and not out of the box.
Regarding the fact that it works with absolute path and not relative ones.
Your relative path is valid in the local file system on your dev server. When deploying the app you are not running in the local file system, but on the web. Even though relative paths are resolved using a similar algorithm, your results will depend on the URL where the component is used and not on the path of the vue file.
For example if the component is rendered on a URL of the form
https://example.com/list/
The relative path would resolve to https://example.com/assets which is probably what you want. But on the following URL
https://example.com/list/1/
Will resolve to https://example.com/list/assest which isn’t what you’d expect.
Webpack takes care of this problems (to some degree, you need to be sure that you don’t mess up the base tag).
I'm using #ngx-translate for language handling in an Angular 5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded.
The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. How can I fix that?
In my lazyload modules i had to add this to imports:
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
also in lazyloaded component i did something like that:
import {TranslateService} from '#ngx-translate/core';
in constructor:
private translate: TranslateService
and finally onInit:
this.translate.use(language);
And it is working just fine.
I've also been struggling with the same problem and have yet to find a feasible answer.
The kind folks at Angular are working on i18n, but this may take more time.
While not ideal, you might want to check out the following article:
“How to split your i18n file per lazy loaded module with ngx-translate?” #frogeret https://medium.com/#TuiZ/how-to-split-your-i18n-file-per-lazy-loaded-module-with-ngx-translate-3caef57a738f
You can check the ngstack/translate library that works for Angular and Ionic apps. Also provides support for lazy loading, page title translations, custom pipes and many other great features.