Is there a way to preload routes in Angular 2 to prevent white flickering and jumping to top?

问题

Using the angular/angular2-seed I have defined a bunch of routes. However, I have the problem where each route is lazily loaded causing a white flickering and a delay (and jumps to the top of the page each first time a route is loaded)... the kind of thing we were getting away from when loading html files old style.

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:

Does your pages animate during the transitions? It could be styles... Post some code so we can check for you. Have you tried the ng-cloak directive? it does remedy the problem you are describing: https://docs.angularjs.org/api/ng/directive/ngCloak

回答2:

As @A_Singh stated in a comment, the problem is that the files are loaded separately because they are not bundled by webpack, so you can't include the templates as .js bundle before you need them, causing the async delay (altough I still can't explain the jump to the top of the page).

Here's how you can modify the webpack config of the angular/angular2-seed project:

package.json

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

webpack.config.js

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

Example usage in your-component.ts

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

Now the routes are loaded instantly and there is no flickering or jumping going on.

来源：https://stackoverflow.com/questions/37286283/is-there-a-way-to-preload-routes-in-angular-2-to-prevent-white-flickering-and-ju

标签

angular

angular2-routing