web-dev-qa-db-ja.com

Angular 2つの遅延読み込み手法

私はすでにAngular 1で大きなアプリケーションを作成し、遅延読み込みと構造化のためにAMDでrequireJSを作成しました。アプリケーションはルートを使用せず、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を保持する必要がありますか？ angular 2のOClazyloadのようなものはありますか？またはフレームワークがなくてもAngular 2で何らかの形で機能しますか？

私は「シンプルに保つ」の友達で、できるだけ小さくシンプルにしたいと思っています。

ありがとう！

javascripthtmlcssangularjslazy-loading
15
user3301565

Angular2はWebコンポーネントに基づいています。最も簡単な方法（あなたが言ったように「シンプルに保つ」）は、ルートとコンポーネントを使用することです。 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>を動的に含めると、コンポーネントが動的にロードされます。これはベストプラクティスではありません。

動的コンポーネントローダー for angular 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リンクを参照）。

お役に立てれば。

3
Tomer Almog

angular 2最新バージョンでは、loadchildrenプロパティを使用して遅延読み込みを実行できます。例：{path： 'Customer'、loadChildren： './ customer.module＃Customer2Module？chunkName = Customer'} 、

上記の例では、webpack Bundling（angular 2 router loader）+ Anguar 2Routingを使用してモジュールを遅延ロードしています。

2
Kattamudi

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

アプリケーションに「home」と「about」の2つのページがあると仮定します。一部の人々はアバウトページに到達しないかもしれないので、実際にそれを必要とする人々にのみアバウトページのロードを提供することは理にかなっています。ここで遅延読み込みを使用します。

0
narasimhareddy969