web-dev-qa-db-ja.com

遅延読み込みを使用してモジュール間でコンポーネントを共有する方法

モジュールを遅延ロードでロードしています。ある形式のモジュールを別のモジュールで使用する必要がある状況にあります。

たとえば、製品モジュールとブランドモジュールがあります。どちらも遅延読み込みで読み込まれます。しかし、私はユーザーが製品フォーム内でブランドを登録できるようにしたかったのです。しかし、私の質問は、両方のモジュールが遅延ロードされるということです。

本当に2つのモジュールを完全にロードする必要がありますか？または、必要なコンポーネントのみをロードできますか？

遅延読み込みの読み込み：

const productRoutes: Routes = [
  {
    path: 'product',
    loadChildren: 'app/admin/product/product.module#ProductModule',
    canLoad: [AuthGuard]
  }
];

const brandRoutes: Routes = [
  {
    path: 'brand',
    loadChildren: 'app/admin/brand/brand.module#BrandModule',
    canLoad: [AuthGuard]
  }
];

私のコンポーネント：

....

<div class="form-group">
    <label for="exemplo">Create Name Product</label>
    <input type="text" name="name" [(ngModel)]="Product.name" #name="ngModel" >
</div>

<div class="form-group">
    <label for="exemplo">Create Brand</label>
    <brand-form-component></brand-form-component>
</div>

[〜＃〜]編集[〜＃〜]

共有モジュールを作成しました：

import { NgModule }            from '@angular/core';

import { FormComponent as 
    FormBrandComponent }      from '../../brand/brand-form/form.component'

@NgModule({
  imports:      [  ],
  declarations: [ FormBrandComponent ],
  providers:    [ FormBrandComponent ],
  exports:      [ FormBrandComponent ],
})
export class SharedModule { }

そして、私は他のモジュールにインポートしました：

ブランドモジュール

import { SharedModule }from '../shared/shared.module';

@NgModule({
  imports: [ SharedModule, DialogModule, GrowlModule, Ng2PaginationModule, BrandRouting ],
  declarations: [ BrandComponent, ListComponent ],
  providers:[ BrandService ]
})
export class BrandModule {}

製品モジュール

import { SharedModule }from './shared/shared.module';


@NgModule({
  imports: [ SharedModule, CurrencyMaskModule, DragulaModule, GrowlModule, DialogModule, Ng2PaginationModule, productRouting, ReactiveFormsModule ],
  declarations: [ ProductComponent, FormComponent, ListComponent ],
  providers:[ FormComponent, ProductService, BreadService, MarcaService, GradeService ]
})
export class ProductModule { }

しかし、次のエラーが発生しています。

enter image description here

angularlazy-loading
8
Jobsdev

遅延読み込みの現在の実装はモジュールレベルであり、それはすべてかゼロかです。 2つの間でコンポーネントを共有する必要がある場合（これはどのように聞こえるか）、まだ完全に識別されていない非表示の共有モジュールがある可能性があります。したがって、これらの共有コンポーネント/サービスを格納する新しいモジュールを作成し、そのモジュールを他の2つの遅延ロードされたモジュールにインポートする必要がある可能性があります。

その新しいモジュールを怠惰にするか、熱心にロードするかはあなたの選択です-どちらでも機能します。 （これは製品モジュールとブランドモジュールの両方の依存関係であるため、どちらかがロードされると、新しいモジュールもロードされます）。

10
snorkpete