Как использовать компоненту одного модуля в другом?

Question

[Skrolea]

Добрый день. Делаю модуль уведомлений Notification. Сделал компоненту показа уведомлений и сделал компоненту NotificationBellComponent, которая будет выводить иконку в ToolbarComponent. В модуле NotificationModule сделал экспорт

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent],
  exports: [NotificationComponent,NotificationBellComponent],  
  providers: [NotificationService]
})

. В модуле ToolbaModule сделал

@NgModule({    
    imports: [CommonModule, SharedModule, NotificationModule,NotificationBellComponent],
    declarations: [ToolbarComponent,NotificationBellComponent],
    exports: [ToolbarComponent]
})

В компоненте ToolbarComponent вывожу <sd-notification-bell></sd-notification-bell>
И получаю ошибку

zone.js?1476075322482:355 Unhandled Promise rejection: Template parse errors:
'sd-notification-bell' is not a known element:
1. If 'sd-notification-bell' is an Angular component, then verify that it is part of this module.

Как правильно экспортировать/импортировать компоненты между модулями?

Answer 1

[Алексей Зуев]

NotificationModule
Вам нужно обязательно объявить NotificationBellComponent в declarations массиве

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent, NotificationBellComponent],
  exports: [NotificationComponent, NotificationBellComponent],  
  providers: [NotificationService]
})

You can export any declarable class — components, directives, and pipes — whether it is declared in this module or in an imported module.

Модули можно экспортировать даже если они не импортированы

You can re-export entire imported modules which effectively re-exports all of their exported classes. A module can even export a module that it doesn't import.

What should I export?

ToolbaModule
1) imports - только для модулей
2) зачем объявлять NotificationBellComponent, если вы его импортируете из модуля NotificationModule
итого ваш модуль

@NgModule({    
    imports: [CommonModule, SharedModule, NotificationModule],
    declarations: [ToolbarComponent],
    exports: [ToolbarComponent]
})

https://plnkr.co/edit/R9pGm6sd8vagd2OepHB4?p=preview

Comments

[Skrolea]

О, спасибо. и особенно за "You can re-export entire imported modules which effectively re-exports all of their exported classes. A module can even export a module that it doesn't import." Да я да импортировал модуль только, а не компоненту отдельно, но вот получаю ошибку

(index):47 Error: (SystemJS) Unexpected value 'undefined' imported by the module 'NotificationModule'

. Что-то не так с модулем (или его содержимым). Но ваш пример то работает

[Алексей Зуев]

Skrolea: если получаете ошибку Unexpected value 'undefined' то значит вы импортировали не оттуда. Пробуйте перебирать через console.log() ваши импорты и увидите что приходит пустое

[Skrolea]

А вроде же в консоли и так должна приходить ошибка, если неоттуда. Типа (Я путь поменял)

src\client\app\shared\toolbar\toolbar.module.ts(5,36): error TS2307: Cannot find module './notification/notification.module'.

[Алексей Зуев]

Skrolea: Ну вот, у вас что-то не так с путями или вы не экспортируете там модуль. Там точно есть модуль c ключевым словом export перед классом?

[Skrolea]

Не. Это я для примера путь изменил для ошибки. Так то у меня ошибки не выдает.

[Skrolea]

Модуль у меня

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared.module';
import { NotificationService } from './notification.service';
import { NotificationComponent } from './notification.component';
import { NotificationBellComponent } from './notification-bell.component';

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent,NotificationBellComponent],
  exports: [NotificationComponent,NotificationBellComponent],  
  providers: [NotificationService]
})
export class NotificationModule { }

[Алексей Зуев]

И всё еще не работает? можете весь код выложить куда-нибудь? Может у вас селектор компонента неправильный?

[Skrolea]

Да я селектор прям скопировал. Код постараюсь сейчас на планкер (уберу сервисы всякие)

[Skrolea]

Не успел отписать. Всё работает, огромное спасибо. Неправильно понял структуру angular2-seed.

[Сергей]

Алексей Зуев А такая схема работает для pipe?

[Алексей Зуев]

Сергей, Да, работает. Создайте пример на plunker или stackblitz с вашей проблемой

[Сергей]

Алексей Зуев, как ни странно ошибка была в написании вызова pipe. и там и там имя было одинаково, но пока не скопировал имя прям из файла он не захотел отработать

[Алексей Зуев]

Сергей, Ну видимо опечатка, бывает