Estou começando a utilizar o Angular 2 e estou tendo problemas para acessar um componente existente em um módulo que criei.
Ao abrir a aplicação, rota root
deve ser direcionada para o modulo IndexModule
onde seu boostrap
é feito no componente geral do mesmo IndexComponent
, assim:
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 {}
E este IndexModule
fica vinculado ao módulo raiz da aplicação AppModule
assim:
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 {}
Meu problema é que, mesmo olhando em inúmeros locais na internet, de como devo trabalhar com o sistema de rotas (como aqui, aqui...) só consegui chegar à solução que eu teria que modificar meu AppModule
inserindo a inicial no mesmo e, mesmo vinculando o módulo IndexModule
ao módulo raiz, ainda teria que forçar o roteamento para o componente IndexComponent
, assim:
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 {}
Como posso acessar meu componente IndexComponent
existente dentro do módulo já importado para o módulo raiz para definir sua rota? É possível fazer com que no AppModule
eu possa dizer para que ele simplesmente busque possíveis rotas existentes dentro do IndexModule
?
EDIT
Pode-se dizer que o que não aceito é que eu tenha que importar o IndexModule
para anexar ao AppModule
e, mesmo assim ainda tenho que importar o IndexComponent
(mesmo já estando dentro do IndexModule
). Eu sei que não preciso é necessário importar o IndexModule
mas se caso eu utilizar mais de um recurso desse módulo, seria mais "otimizado" a importação somente do módule e trabalhar com algo assim
IndexModule.<MeuComponenteOuQualquerOutraCoisa> // Ex: IndexModule.IndexComponent
Se eu conseguisse alguma maneira de utilizar o IndexComponent
sem precisar declará-lo (que entendo que uma dupla referência) já seria satisfatório para meu código.
A intenção desse post não é precisamente manipular as rotas em questão mas, sim trabalhar com os componentes existentes dentro de outro módulo (com apenas o import desse módulo).
Basicamente, não quero ter que fazer isso:
//importação em redundância porque 'IndexComponent' é exportado no 'IndexModule'
import { IndexModule } from './index/index.module';
import { IndexComponent } from './index/index.component';