Geek Answers Handbook

Is there a way to preload routes in Angular 2 to prevent white flickering and jump up?

Using angular / angular2-seed , I defined a bunch of routes. However, I have a problem where each route loads lazily, causing white flicker and delay (and each time it loads a route, it jumps to the top of the page every time) ... the thing that we left off when loading html old-style files .

Here is my route configuration:

@RouteConfig([ {path: '/about', component: About, name: 'About', useAsDefault: true}, {path: '/features', component: Features, name: 'Features'}, {path: '/examples', component: Examples, name: 'Examples'}, {path: '/download', component: Download, name: 'Download'}, {path: '/contact', component: Contact, name: 'Contact'} ])

Is there a way to preload these routes?

+1
source share
2 answers

As pointed out in a comment by @A_Singh, the problem is that the files are downloaded separately because they are not related to the web package, so you cannot include templates in the .js package before you need them, which will delay async ( although I still cannot explain the jump at the top of the page).

Here you can change the webpack configuration of the angular / angular2-seed project:

package.json

 "devDependencies": { ..., "html-loader": "^0.4.3", },

webpack.config.js

 module: { loaders: [ ..., { test: /\.html$/, loader: 'html' } ] }

Usage example in your-component.ts

 @Component({ template: require('app/components/your-component/your-component.html') })

Routes now load instantly without flickering or jumping.

0
source

Are your pages animated during transitions? It could be styles ... Send the code so we can check you out. Have you tried the ng-cloak directive? it fixes the problem you are describing: https://docs.angularjs.org/api/ng/directive/ngCloak

0
source

More articles:


All Articles