Вложенные модули в приложении Angular

Question

Я разрабатываю приложение, которое начинает иметь много компонентов. Я хотел бы разбить компоненты на отдельные модули, чтобы модуль приложения не перечислял много-много компонентов, а код становился неорганизованным.

У меня есть компонент ImageUploadComponent, который я планирую использовать в нескольких других компонентах.

Я создал модуль ProductsModule, который импортирует и объявляет все компоненты, которые конкретно относятся к продуктам.

import { ProductsComponent }       from './products.component';
import { ProductDetailComponent }  from './product-detail.component';

...

@NgModule({
  declarations: [
      ProductsComponent,
      ProductDetailComponent
  ],
  ...
})
export class ProductsModule { }

В app.module я импортирую и ProductsModule, и ImageUploadComponent:

import { ProductsModule } from './products/products.module';
import { ImageUploadComponent } from './shared/image_upload.component';
...
@NgModule({
  declarations: [
    ...
    ImageUploadComponent,
  ],
  imports: [
    ...
    ProductsModule,
  ],
  ...
})
export class AppModule { ... }

Однако, ProductsModule не знает о ImageUploadComponent, и, таким образом, попытка использовать ImageUploadComponent внутри ProductsComponent приводит к ошибке.

Как разбить мой код на отдельные модули в Angular2 таким образом, чтобы общий компонент можно было использовать во всех модулях?

Моя версия Angular - 2.1.1.

Answer 1

Вы должны создать модуль для ImageUploadComponent и импортировать его в AppModule а также ProductsModule,

Чтобы вы могли использовать компонент внутри другого модуля, вы должны экспортировать компонент, что-то вроде:

import { ImageUploadComponent } from './shared/image_upload.component';
...
@NgModule({
  declarations: [
    ImageUploadComponent,
  ],
  exports: [
    ...
    ImageUploadComponent, // Here you dispose the component to other modules
  ],
  ...
})
export class ImageUploadModule { ... }

Почему бы не загрузить его только в ProductsModule? Потому что, если вы не загрузите его в appModule вы в конечном итоге с экземпляром ImageUploadComponent в каждом модуле, который импортирует его.

Angular делит экземпляры между родительским и дочерним модулями, а не между братьями.