How to use components exported from other modules in Angular 2

0

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

When opening the application, route root should be directed to the module IndexModule where its boostrap is made in the general component of the IndexComponent , like this:

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 root module of the application AppModule like this:

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 .. .) I only managed to get to the solution that I would have to modify my AppModule by inserting the initial in it and even linking the IndexModule module to the root module, which forces the routing to the IndexComponent component, like this:

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 existing IndexComponent component within the module already imported into the root module to define its route? Is it possible to make it possible for AppModule to tell it to simply search for possible routes within IndexModule ?

EDIT

You can say that what I do not accept is that I have to import IndexModule to attach to AppModule , and still have to import the IndexComponent (even already being within IndexModule ). I know that I do not need to import the IndexModule but if I use more than one feature of that module, it would be more "optimized" to just import the module and work with something like this

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

If I could get some way to use 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 rather to work with the existing components within another module (with only the import of that module).

Basically, I do not 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'; 
    
asked by anonymous 07.03.2017 / 21:54

0 answers