角2の遅延読み込み技術

Question

私は既にAngular 1で大きなアプリケーションを書いており、遅延読み込みと構造化のためにAMDではrequireJSを書いています。アプリケーションはルートを使用しませんが、HTML、CSS、Javascript（角モジュール）のようなアプリケーションの部分は遅延ロードされます。

私はAngular 2に変更したいと思います。ルートに依存せず、何千もの異なるjavascriptに依存しない、HTML、CSS、JS（角）コンテンツのための最良のレイジーローディング手法を探しています。フレームワーク。

だから、遅延ロードのルート要素は非常に簡単であるように思わ： http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

しかし、どのようにルーティングすることなく、そのシナリオを達成するのでしょうか？ webpackのようなものをお勧めしますか、またはrequireJSを維持する必要がありますか？角2のOClazyloadのようなものがありますか？それともフレームワークなしでもAngular 2で何とか動作しますか？

私は "keep it simple"の友達で、できるだけ小さく、シンプルにしたいと思っています。

ありがとうございます！

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>含まれるようにテンプレートを変更する場合：例えば。これはベストプラクティスではありません。

角度2にはdynamic component loaderがありますが、これはルートやディレクティブを使用するほど簡単ではありません。コンポーネントのインスタンスを作成し、別のコンポーネントインスタンスのコンポーネントビュー内にあるビューコンテナにアタッチします。あなたが使用することができ、それと

：

@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リンクを見てください）がありますこのコンポーネントインスタンスにプロビジョニングされています。

これが役に立ちます。

Answer 2

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

は、我々のアプリケーション、「ホーム」と「約」で2つのページを持っていると仮定します。一部の人々はaboutページに到達することはないかもしれないので、実際に必要な人にaboutページの負荷を提供するだけの意味があります。ここでは、遅延ロードを使用します。

Answer 3

最新のバージョンでは、遅延読み込みを実行するためにloadchildrenプロパティを使用できます。たとえば ：私はWebPACKのバンドル（角2ルータ・ローダを使用しています。この上記の例では、

{ './customer.module#Customer2Module?chunkName=Customer' パス： '顧客'、 loadChildren} ）+ Anguar 2モジュールを遅延ロードするためのルーティング。