Köşeli 2 tembel yükleme teknikleri

Question

Zaten açısal yükleme ve yapılandırma için Angular 1 ve AMD ileJS ile büyük bir uygulama yazdım. Uygulama rota kullanmaz, ancak uygulamanın HTML, css ve Javascript (açısal modüller) gibi kısımları tembeltir.

Şimdi Angular 2'ye geçmek istiyorum ve rotalara bağlı olmayan ve binlerce farklı javascript'e bağlı olmayan HTML, css ve JS (açısal) içerik için en iyi yükleme tekniğini arıyorum. çerçeveler.

Yani geç yükleme rota bileşenleri oldukça basit gibi görünüyor: http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

ama nasıl güzergah olmadan bu senaryoyu başarmak ki? Webpack gibi bir şey önerir misiniz, yoksa JJ'yi tutmalı mıyım? Açısal 2 için OClazyload gibi bir şey var mı? Yoksa herhangi bir çerçeveye sahip olmasa bile Angular 2 ile bir şekilde çalışır mı?

"Basit tut" un bir arkadaşıyım ve gerçekten mümkün olduğunca küçük ve basit tutmak istiyorum.

Teşekkürler!

Answer 1

Köşeli 2, web bileşenlerine dayanmaktadır. En kolay yol ("dediğiniz gibi") rotaları ve bileşenleri kullanıyor. Ayrıca bileşenleri yalnızca html'nizdeki yönergeleri kullanarak yükleyebilirsiniz. örneğin:

@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 {} 

Eğer <my-component> içerecek şekilde şablonu değiştirirseniz

dinamik dinamik bileşeni yükleyecektir. Bu en iyi uygulama değildir.

, açısal 2 için dynamic component loader var, ancak bu, rota veya yönerge kullanmak kadar kolay değil. Bir Bileşen örneğini oluşturacak ve bunu, başka bir Bileşen örneğinin Bileşen Görünümünde bulunan bir Görünüm Kutusuna iliştirecektir. onunla

kullanabilirsiniz:

@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); 

çıkan DOM: Başka bir seçenek isteğe Enjektör yapılandırma sağlayıcıları sağlayabilir hangi (yukarıdaki angular2 bağlantıya bakabilir) Orada

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

bu Bileşen Örneği için sağlanmıştır.

Bu yardımcı olur umarım.

Answer 2

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

bizim uygulaması, “ev” ve “Hakkında” iki sayfa bildiğinizi varsayalım. Bazı kullanıcılar hiç bir zaman bu sayfaya ulaşamayabilirler. Bu nedenle, yalnızca yaklaşık sayfanın yüküne gerçekten ihtiyaç duyan kullanıcılara sunulması mantıklıdır. Tembel yükleme kullanacağımız yer burası.

Answer 3

Köşeli 2 ile Son sürüm, tembel yükleme gerçekleştirmek için loadchildren özelliğini kullanabiliriz. Örneğin : { yolu: 'Müşteri', loadChildren: './customer.module#Customer2Module?chunkName=Customer' }

I webpack demet haline kullanıyorum bu, yukarıdaki örnekte (açısal 2 yönlendirici yükleyici) + Anguar 2 Tembel yükleme modülleri yönlendirir.