Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

[angular2][ngModules] how to call component from other module?

Tags:

angular

After update angular to rc5 i have a small problem.

I start rewrtie my application to modules [ngModules].

And i have a small problem, I have two different modules, but module1 need to call a directive (component) from other module.

For now i doing that, but didn't worked ...

AppModule (module 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 {

}

and in template

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

now i have sim-cards.module (module 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 {

}

and sim-cards.component (module 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 {
...
}

How to do it in right way ? Do i need to import a component (sim card) in appmodule ? of in appcomponent ?

Or i do something wrong ??

In browser i get only string, loading... no error in console.

like image 394
Daredzik Avatar asked Aug 28 '16 09:08

Daredzik


People also ask

How do you call a component from another module?

Component can be declared in a single module only. In order to use a component from another module, you need to do two simple tasks: Export the component in the other module. Import the other module, into the current module.

Can we use one module component to other module components?

You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application. Notice the following: It imports the CommonModule because the module's component needs common directives.

How does NgModules work and its components?

@NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime. It identifies the module's own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them.


1 Answers

Export SimCardsComponent from the SimCardsModule. Only exported components are usable in the importing modules.

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

The NgModule documentation is a must-read.

like image 61
JB Nizet Avatar answered Oct 22 '22 03:10

JB Nizet