Preloading, lazy loaded pages Ionic 4 - javascript

In Ionic 3 we had the option to preload pages by doing:
IonicModule.forRoot({
preloadModules: true
});
But when I try to do that in Ionic 4, it gives me an error:
Argument of type '{ preloadModules: boolean; }' is not assignable to parameter of type 'IonicConfig'.
Someones know how to do this in Ionic 4.

Ionic 4 under the hood uses Angular CLI, which supports Lazy Loading Modules. While creating Routes using forRoot(), forChild(). We can define the lazy loaded modules using loadChildren configuration.
const app_routes: Routes = [
{
path: 'home',
loadChildren: 'app/home/home.module#HomeModule'
},
{ path: '', pathMatch: 'full', redirectTo: '/login' },
{ path: '**', pathMatch: 'full', redirectTo: '/login' }
];
RouterModule.forRoot(app_routes);
We are telling ionic/Angular CLI, when user access '/user' location path, we need to load the Home Module as lazyloaded, which will internally load the required components and services.
Ionic Docs: https://beta.ionicframework.com/docs/

Related

Missing Script generated by Webpack(development) on first page load

the first time i load the login page the login.js script doesn't load , only the shared.js bundle loads (which has bootstrap js/css and toastr css), if i refresh the page everything loads without problems and after that there are no problems.
Pretty much every time i restart my local server i need refresh the login page to be able to login
my webpack config is as follows
export default {
entry: {
shared: [
'./src/3rdparty/bootstrap/bootstrap.min.js',
'./src/3rdparty/bootstrap/bootstrap.min.css',
'./src/3rdparty/toastr/toastr.min.css',
],
login : {
import: './src/pages/login.js',
filename: 'main/login.js',
dependOn: 'shared',
chunkLoading: false,
}
},
output:{
path: fileURLToPath(new URL('public',import.meta.url)),
clean:true,
},
resolve:{
extensions: ['.js']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
mode: 'development'
}
The project has been build using Node 16.17 / Expressjs 4
It works without problems if i change the mode to production
Going to write in case i encounter the same issue again:
after adding the compression library i cannot replicate the issue
another issue that i had was that when i was returning messages from the server with the status 400, it would return a invalid string Ex:
{ok:true, description:"username invalid"
always missing the closing bracket }
this issue has also been resolved by using compression middleware

Error creating custom pages from local plugin within GatsbyJS

My goal is creating pages from local plugin. I wrote a custom plugin named my-custom-plugin. I've also installed gatsby-plugin-page-creator plugin to automatically create pages from my components outside default pages directory.
This is my project structure:
plugins
/my-custom-plugin
/gatsby-node.js
/package.json
src
/components
/pages
/single.js
gatsby-config.js
gatsby-node.js
...etc
gatsby-config.js (from root):
module.exports = {
plugins: [
`my-custom-plugin`,
{
resolve: `gatsby-plugin-page-creator`,
options: {
path: `${__dirname}/src/components/pages`,
}
},
]
}
plugins/my-custom-plugin/gatsby-node.js
const path = require('path')
const location = path.resolve(__dirname, '..', '..', '/src/components/pages')
exports.createPages = ({ actions }) => {
const { createPage } = actions
createPage({
path: `/sample-page`,
component: `${location}/single.js`,
context: {
slug: 'sample-page'
}
})
}
Unfortunately, I got error message The plugin "my-custom-plugin" created a page with a component that doesn't exist when running gatsby develop. Am I doing wrong? Any help?
Regards.
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-page-creator
You don't need a custom plugin. The README states that you only need to insert the config into gatsby-config.js.
Your current local plugin tries to do exactly that what the page-creator plugin already does.

Angular Router Get 404 Bug?

My problem is that every time I load my link. Ex:
"https://www.example.com/" it will redirect to
"https://www.example.com/design-brief" since I configured it in my routing.ts.
But when I will use the link "https://www.example.com/design-brief" and enter in my address bar, it will show an error in console log.
"GET https://www.example.com/design-brief 404 ()"
const APP_ROUTES: Routes = [
{ path: 'design-brief', component: DesignBriefComponent },
{ path: 'design-evaluation', component: DesignEvaluationComponent },
{ path: '', redirectTo: '/design-brief', pathMatch: 'full' },
{ path: "**",redirectTo:"/design-brief" } ];
Here is my code in my routing.ts
See my answer here for a more detailed explanation of why this is happening.
In a nutshell, you have 2 options:
Configure your web server to always respond with the
index.html whenever it detects a 404 - that way, Angular will always
load and its routing service will handle the navigation on the
client side.
Change your app's locationStrategy to the Hash location strategy as
described here. However, that would change your app's URLs, and it's
not that desirable in my opinion.
You don't need the empty path and the ** path, only the ** path with pathMatch 'full':
const APP_ROUTES: Routes = [
{ path: 'design-brief', component: DesignBriefComponent },
{ path: 'design-evaluation', component: DesignEvaluationComponent },
{ path: "**",redirectTo:"design-brief",pathMatch: 'full' } ];
and redirect does not need the slash (/) in front of design-brief
I Solved it by using Hash location strategy.Add following code to the imports portion of the #ngModule and prefix all your hyperlink with #
and also refer offecial link for info
RouterModule.forRoot(
appRoutes,{ useHash: true }
)

sw-precache-webpack-plugin webpack service worker default template

I'm using the sw-precache-webpack-plugin to generate a service worker for my project, I can see all my fonts, js and css files in the cache storage but not the index / html file and its not working when i go offline. I also get a 'site cannot be installed: no matching service worker detected.' when i try and add to homepage on the App manifest.
My stack is a universal React + redux app, with Express + ejs for index file. I'm not sure if its because I'm using ejs rather than a default html file, but it doesnt seem to find the file. Is there a way I can specify a template? My sw-precache-webpack-plugin webpack setting is:
new SWPrecacheWebpackPlugin({
cacheId: 'tester',
filename: 'my-service-worker.js',
directoryIndex: '/',
}),
Any advice would be appreciated
You are missing a specification of a caching strategy in the plugin config.
plugins: [
new SWPrecacheWebpackPlugin({
cacheId: 'tester',
filename: 'my-service-worker.js',
runtimeCaching: [
{
urlPattern: '/',
handler: 'cacheFirst',
}
]
})
]
Documentation: https://github.com/GoogleChrome/sw-precache#runtimecaching-arrayobject

How to make a RequireJS App Modular i.e. download files on the go, not at once

I'm working on a huge Web App (AngularJS and RequireJS), in which there are a lot of JS files. (So many Controllers, Filters, Services and so many 3rd party plugins). The problem that I face is, my App takes too much time to download all the files (at once) each time I refresh my App. Can we use any strategy by which we configure our require JS in a way that only the required files should be donwloaded instead of All files?
Currently my Require JS is configured this way:
reqire.config({
paths: {
angular: '../../',
jquery: '../../', .......
}, shim: {
bootstrap: {
deps: ['jquery']
}.........................
});
You may also want to look at ocLazyLoad for your lazy loading needs- link
One strategy is to require the loading of plugins in ui-router's Resolve call. This will load the required dependencies for a view/state before attempting to transition to it, and is promise-aware to ensure that everything loads in the right order.
.state('myState', {
url: '/myState',
template: '<div ui-view class="fade-in"></div>',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load(['scripts/controllers/myController.js']);
}]
}
})
You can also use it to load multiple files if you so require.
.state('ui.map.google', {
url: '/google',
templateUrl: 'views/ui/map/google.html',
controller: 'GoogleMapCtrl',
resolve: {
deps: ['$ocLazyLoad',
function( $ocLazyLoad ){
return $ocLazyLoad.load( [
{
files: ['vendor/jquery/load-google-maps.js',
'scripts/controllers/googlemap.js']
},
{
name:'ui.map',
files:['vendor/modules/angular-ui-map/ui-map.js']
}
]).then(
function(){
return loadGoogleMaps();
}
)
}]
}
})
You don't need to do anything special in the controller to make this work, and the ocLazyLoad plugin is very configurable (you can set up manifests/packages, etc).

Categories