How to implement lazy loading of components in Angular 2?

Question

JavaScript

How to implement lazy loading of components in Angular 2 (specifically - in the RC version)?

Answer 1

Because at the moment, creating a component from a string is not yet implemented

function resolveComponent(resolver, snapshot) {
        // TODO: vsavkin change to typeof snapshot.component === 'string' in beta2
        if (snapshot.component && snapshot._routeConfig) {
            return resolver.resolveComponent(snapshot.component);
        }
        else {
            return Promise.resolve(null);
        }
    }

RuntimeCompiler.prototype.resolveComponent = function (component) {
            if (isString(component)) {
                return PromiseWrapper.reject(new BaseException$1("Cannot resolve component using '" + component + "'."), null);
            }
            return this.compileComponentAsync(component);
        };

Therefore, there is only one option for lazy loading, which is to use @angular/router-deprecated instead of @angular/router
And use for example this approach www.syntaxsuccess.com/viewarticle/lazy-loading-in-...

Answer 2

WebPack allows you to upload on demand

require.ensure(['jquery'], function(require) {
  require("jquery");
});

Answer 3

I wrote about it on my blog for a long time. Webpack and LazyLoad Angular Modules