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.
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.
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.
@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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With