How to use components exported from other modules at Angular 2

Question

I’m starting to use Angular 2 and I’m having trouble accessing an existing component in a module I created.

When opening the application, route root should be directed to the module IndexModule where your boostrap is made on the general component of the IndexComponent, thus:

Indexmodule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IndexComponent } from './index.component';

@NgModule({
  declarations: [IndexComponent],
  imports: [CommonModule],
  exports: [IndexComponent],
  providers: [],
  boostrap: [IndexComponent]
})

export class IndexModule {}

And this IndexModule is linked to the application’s root module AppModule thus:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { IndexModule } from './index/index.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpModule, IndexModule],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

My problem is that, even looking at numerous sites on the internet, how should I work with the route system (such as here, here...) only managed to reach the solution that I would have to modify my AppModule inserting the initial in it and even linking the module IndexModule to the root module, would still have to force the routing to the component IndexComponent, thus:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { IndexModule } from './index/index.module';
import { IndexComponent } from './index/index.component';

import { AppComponent } from './app.component';

const router = [{
  path: '',
  component: IndexComponent
}]

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(router),

    IndexModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

How can I access my component IndexComponent existing within the module already imported into the root module to define its route? It is possible to do AppModule I can tell him to simply search for possible existing routes within the IndexModule?

EDIT

You could say that what I don’t accept is that I have to import the IndexModule to attach to the AppModule and yet I still have to care IndexComponent (even though you are already inside the IndexModule). I know I don’t need to import the IndexModule but if I use more than one feature of this module, it would be more "optimized" to import only the module and work with something like this

IndexModule.<MeuComponenteOuQualquerOutraCoisa> // Ex: IndexModule.IndexComponent

If I could somehow use the IndexComponent without having to declare it (which I understand a double reference) would already be satisfactory for my code.

The intention of this post is not precisely to manipulate the routes in question but to work with the existing components within another module (with only the import of this module).

Basically, I don’t want to have to do this:

//importação em redundância porque 'IndexComponent' é exportado no 'IndexModule'
import { IndexModule } from './index/index.module';
import { IndexComponent } from './index/index.component'; 

Answer 1

You need to create an intermediate module, because the app.module that had index.module imported cannot view the components exported by index.module. In order for the app.module to be able to view it is necessary to have a transitive module.

Try to do it this way:

1. Create a new module: transtive.module.ts

2. This new module will export index.module

3. After doing this, take index.module and index.Component out of the app.module

4. Finally import transitive.module into the app.module.

This way you will be able to view the entire index.Component in the application.

This problem is due to the following rule of angular: The selectors applicable during the compilation of a component model are determined by the module declaring that component and the transitional closure of imports from that module.