Search code examples
angularlazy-loadingquotesangular2-routing

Where is the lazy quoted route in Angular 2?

I've watched this clarifying keynote in which Papa Misko presents the new routing system introduced in the RC version.

It's contained in the presentation the solution for the "Last Lazy Loading Puzzle Piece", and that relies on quoting the route component name as shown in his own example:

{path: 'simple', component: SimpleCmp}   // Non-lazy route
{path: 'simple', component: 'SimpleCmp'} // Lazy route

But its not working to me! The typescript compiler is complaining though. Here is the error:

Argument of type '{ path: string; component: string; }[]' is not assignable to parameter of type 'RouteMetadata[]'.
  Type '{ path: string; component: string; }' is not assignable to type 'RouteMetadata'.
    Types of property 'component' are incompatible.
      Type 'string' is not assignable to type 'Type'.

It seems that is was not implemented yet. Does someone know what's going on and if it's really not implemented?

Solution

  • At this time (06/08/16) it isn't finished yet, but if you're using webpack you can use a combination of es6-promise combined with webpack's require() to create your own "lazy-loading".

    When the official lazy-loading comes out, you can just as easily remove this and use the upcoming standard Angular lazy-loader.

    Take a look at the example here in angular2 webpack starter.

    @RouteConfig([
  // Async load a component using Webpack's require 
  // with es6-promise-loader and webpack `require`

  { 
    path: '/about', name: 'About', 
    loader: () => require('es6-promise!./about')('About') 
  }

])

    Just make sure you have es6-promise installed and inside your package.json.

    npm i es6-promise --save