Угловые 2 ленивые методы загрузки

Question

Я уже написал большое приложение с угловым 1 и requireJS с AMD для ленивой загрузки и структурирования. Приложение не использует маршруты, но части приложения, такие как HTML, css и Javascript (угловые модули), загружаются лениво.

Теперь я хочу перейти на Angular 2, и я ищу лучшую ленивую технику загрузки для HTML, css и JS (углового) контента, которая не зависит от маршрутов и которая не зависит от тысяч разных javascript рамки.

Так ленивые компоненты загрузки маршрута, кажется, довольно просто: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

, но как бы вы выполнить этот сценарий без маршрутов? Вы порекомендовали бы что-то вроде webpack, или я должен держать requireJS? Есть что-то вроде OClazyload для углового 2? Или это работает как-то с Angular 2 даже без каких-либо фреймворков?

Я друг «держу это просто», и я действительно хотел бы сохранить его как можно малым и простым.

Спасибо!

Answer 1

Угловой 2 основан на веб-компонентах. Самый простой способ («держите его простым», как вы сказали), использует маршруты и компоненты. Вы также можете загружать компоненты, просто используя директивы в своем html. например:

@Component({ 
    selector: 'my-component', // directive name 
    templateUrl: './app/my.component.html', 
    directives: [] 
}) 
export class MyComponent {} 



@Component({ 
    selector: 'root-component', // directive name 
    directives: [MyComponent], 
    template: '<my-component></my-component>', 
}) 
export class myComponent {} 

, если изменить шаблон, чтобы включить <my-component> динамически она будет загружать компонент динамически. Это не лучшая практика.

есть dynamic component loader для угловых 2, но это не так просто, как использование маршрутов или директив. он создаст экземпляр компонента и добавит его в контейнер представления, расположенный внутри представления компонентов другого экземпляра компонента.

с ним вы можете использовать:

@Component({ 
    selector: 'child-component', 
    template: 'Child' 
}) 
class ChildComponent { 
} 
@Component({ 
    selector: 'my-app', 
    template: 'Parent (<child id="child"></child>)' 
}) 
class MyApp { 
    constructor(dcl: DynamicComponentLoader, injector: Injector) { 
    dcl.loadAsRoot(ChildComponent, '#child', injector); 
    } 
} 
bootstrap(MyApp); 

В результате DOM:

<my-app> 
    Parent (
    <child id="child">Child</child> 
) 
</my-app> 

Существует еще один вариант (смотреть на angular2 ссылке выше), в которой вы можете дополнительно предоставить провайдерам, чтобы настроить Injector для этого компонента.

Надеюсь, это поможет.

Answer 2

https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

Давайте предположим, что у нас есть две страницы в нашем приложении, «домашний» и «о». Некоторые люди могут никогда не дойти до страницы, поэтому имеет смысл только обслуживать нагрузку на странице тем людям, которые на самом деле нуждаются в ней. Здесь мы будем использовать ленивую загрузку.

Answer 3

С угловой 2 Последняя версия мы можем использовать свойство loadchildren для выполнения ленивой загрузки. Например: { путь: 'Клиент', loadChildren: '' ./customer.module#Customer2Module?chunkName=Customer },

В этом примере выше я использую WebPack пакетирования (угловой 2 маршрутизатора погрузчик) + Anguar 2 Маршрутизация для ленивой загрузки модулей.