[kąt2] [ngModuły] jak wywołać komponent z innego modułu?

Question

Po aktualizacji kątowej do rc5 mam mały problem.

Rozpoczynam odświeżanie mojej aplikacji do modułów [ngModules].

Mam mały problem, mam dwa różne moduły, ale moduł 1 musi wywoływać dyrektywę (komponent) z innego modułu.

Na razie robię to, ale nie działało ...

AppModule (moduł 1):

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { AppComponent } from './app.component'; 

import { HttpModule }  from '@angular/http'; 

import { SimCardsModule } from './+sim-cards/sim-cards.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    SimCardsModule 
    ], 
    providers: [], 
    entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 

} 

AppComponent:

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

declare let $: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 

} 

w szablonie

<sim-cards> loading </sim-cards> 

teraz mam sim -cards.module (moduł 2):

import { NgModule, ApplicationRef } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { HttpModule }  from '@angular/http'; 

import { SimCardsComponent } from './sim-cards.component'; 
import { SimCardsService } from './sim-cards.service'; 

@NgModule({ 
    declarations: [ 
     SimCardsComponent 
    ], 
    imports: [ 

     CommonModule, 
     FormsModule, 
     HttpModule 
    ], 
    providers: [SimCardsService], 
    entryComponents: [SimCardsComponent], 
    bootstrap: [SimCardsComponent] 
}) 
export class SimCardsModule { 

} 

i sim-cards.component (moduł 2):

import {Component, OnInit, ViewEncapsulation} from '@angular/core'; 
import {SimCardsService} from './sim-cards.service'; 
import {IfEmptySetDefaultPipe} from '../pipes/if-empty-set-default.pipe'; 
import {IsInternalSimCardPipe} from '../pipes/is-internal-sim-card.pipe'; 
import {ClientNumberSimCardPipe} from '../pipes/client-number-sim-card.pipe'; 
import {OperatorIdSimCardPipe} from '../pipes/operator-id-sim-card.pipe'; 

declare let $: any; 

@Component({ 
    selector: 'sim-cards', 
    templateUrl: 'sim-cards.component.html', 
    styleUrls: ['sim-cards.component.scss'], 
    encapsulation: ViewEncapsulation.None, 
    pipes: [IfEmptySetDefaultPipe, IsInternalSimCardPipe, ClientNumberSimCardPipe, OperatorIdSimCardPipe] 
}) 
export class SimCardsComponent implements OnInit { 
... 
} 

Jak to zrobić w odpowiedni sposób? Czy muszę importować komponent (kartę sim) w appmodule? w appcomponent?

Czy coś robię źle?

W przeglądarce otrzymuję tylko ciąg, ładowanie ... brak błędu w konsoli.

Answer 1

Wyeksportuj SimCardsComponent z SimCardsModule. Tylko eksportowane komponenty są przydatne w modułach importujących.

@NgModule({ 
    exports: [SimCardsComponent], 
    ... 
}) 
export class SimCardsModule { 

Numer NgModule documentation należy przeczytać.