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';