web-dev-qa-db-ja.com

Angular遅延ロードされたモジュールの6つの表示コンポーネント

Angular 6を使用して、遅延ロードされたモジュールからコンポーネントをロードする際に問題が発生しました。

CLIを使用してライブラリを作成しました-ng generate library @org/chat

angular.jsonファイルを更新して以下を含めました。

"lazyModules": [
   "dist/org/chat"
],

次に、AppComponentを介してモジュールを正常にロードします。

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

これまでのところ良好で、モジュールがロードされています。

ただし、ChatModuleにはChatPopupComponentというコンポーネントがあり、ダイアログを使用して（または、ViewChildコンテナーに追加して）表示する方法が見つかりません。

ダイアログでコンポーネントを開くには、モジュールのentryComponentsで宣言し、AppComponentレベルでインポートする必要があります。

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

しかし、コンポーネントを直接インポートする（そしてライブラリからエクスポートする）と、次の（明らかな）エラーが発生します： 'Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'。遅延ロードされたモジュールであるため、明らかにまだインポートされていません。

私が以下を試すとき：

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      });

次のエラーが発生します-error loading module Error: No component factory found for EmailPopUpComponent. Did you add it to @NgModule.entryComponents?

コンポーネントを表示する唯一の方法は、app.module.ts内にモジュールをインポートすることですが、遅延ロードされたモジュールを持つという目標に反しているようです。

上記を実行する方法はありますか、それとも遅延読み込みモジュールとコンポーネントについて基本的なことを見逃していますか？

angularangular6lazy-loadingangular-library
12
dev7

chatPopupComponentを別のモジュールとして宣言してみてください。

chat-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [ChatPopupComponent],
    exports: [ChatPopupComponent],
})
export class ChatPopupModule { }

..EmailPopupComponentについても同じことを行います。

email-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [EmailPopupComponent],
    exports: [EmailPopupComponent],
})
export class EmailPopupModule { }

..そして、両方のモジュールをChatModuleインポートとentryComponents配列に追加します。

chat.module.ts

@NgModule({
    imports: [
        CommonModule,
        ...
        ChatPopupModule,
        EmailPopupModule,
    ],
    declarations: [
        ...
    ],
    entryComponents: [
        ChatPopupComponent,
        EmailPopupComponent,
    ]
})
export class ChatModule { }
1
lolcatzftw

あなたは私を助けた次のリンクを参照することができます

Angularサイトの遅延読み込み

実装方法

同じ問題が発生しますが、angular 6では、「lazyloaded」でロードされたすべてのモジュールをルートモジュール（app.module.ts）のインポート宣言から削除する必要があるようです。 ）少なくとも私にとってはうまくいきます。

スタック回答

0
Sagar Ahuja

EmailPopupComponentをロードしようとしているコンポーネントは、それを認識している必要があります。つまり、コンポーネントが宣言されているモジュールには、何らかの方法でEmailPopupComponentへの参照が必要です。これは、次の2つの方法で実行できます。

  • アクセスしたいコンポーネントと同じモジュールでEmailPopupComponentを宣言します
  • emailPopupComponentが宣言されているモジュールをインポートし、アクセスしたいコンポーネントが宣言されているモジュールにエクスポートします（他のモジュールに表示されることが重要です）。これは、例えばアプリケーション全体に広がるコンポーネントを含むSharedModuleで実行されます。

モジュールのインポートに加えて、モジュールデコレータで使用できるいわゆるentryComponents配列があります。これは、モジュール内の参照に加えて、マテリアルダイアログのようなダイアログで使用する場合（例で行ったように）、EmailPopupComponentを含む必要があります。

0
Nadine