Geek Answers Handbook

[angular2] [ngModules] how to call a component from another module?

After upgrading angular to rc5, I have a little problem.

I am starting to rewrite my application into the [ngModules] modules.

And I have a little problem, I have two different modules, but module1 needs to call the directive (component) from another module.

Now I do it, but it didn’t work ...

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 the template

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

I now 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 right? Do I need to import a component (SIM card) into the appmodule? in appcomponent?

Or am I doing something wrong?

In the browser, I only get the line loading ... without errors in the console.

+6
source share
2 answers

Export SimCardsComponent from SimCardsModule. Only exported components can be used in import modules.

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

NgModule documentation is a must read.

+12
source

There should be ((((((((((((((((((JVM))))))))))))))))))))))))))))) )))))))))))))))))))))))))))))))))))))))))))))))))))) ))))) for the C language. Literally. If C is wrong, it can destroy all of your computer's memory.

0
source

More articles:


All Articles