Dúvida com Rotas e Construtores

Oi Fabio,

Consigo te responder sua primeira dúvida nesse momento. Se puder, transforme os dois últimos itens em duas perguntas diferentes aqui no fórum. Isso vai ajudar a galera que tem a mesma dúvida que você a achar ela pela busca do fórum e até mesmo do google :)

Bora lá!

O que vc quer na primeira dúvida é o que chamamos isso de lazy loading dos componentes. O primeiro passo é tirar a declaração dos componentes lá do app.module, como você disse que quer fazer. Tirando as declarações dos componentes, eles não serão carregados e aí nada mais vai funcionar, mas já arrumaremos isso.

Hoje em dia você tem um roteamento configurado para o app.module todo. Nesse roteamento cada path carrega um component:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from '../home/home.component'
import { HelloComponent } from '../hello/hello.component';

const routes: Routes = [
{path: "", component: HomeComponent},
{path: "hello", component: HelloComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingRoutingModule { }

O que mudaria no lazy loading é que você não vai mais carregar um component em cada path, mas sim, um módulo que tenha o componente declarado e até mesmo outras subrotas lá dentro. Para isso, ao invés de component, você passaria a usar a propriedade loadChildren apontando para esse módulo:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from '../home/home.component'

const routes: Routes = [
{path: "", component: HomeComponent},
{path: "hello", loadChildren: 'app/hello/hello.module#HelloModule'}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingRoutingModule { }

Note que o valor de loadChildren é uma string e não a class do módulo em si, justamente para que não haja necessidade de fazer o import do módulo, afinal, queremos carregá-lo só quando a página for acessada.

Agora, dentro desse módulo HelloModule, você deve declarar os componentes todos que quer que sejam carregados e criar e importar um novo módulo de roteamento apenas para o HelloModule. Nesse módulo de roteamento novo, você pode voltar a dizer qual path vai pra cada component, só que com uma diferença, esse roteamento já está subentendido que é a partir da url hello.

O HelloModule ficaria assim:

import { NgModule } from '@angular/core';
import { HelloRoutingModule } from './hello-routing.module';
import { HelloComponent } from './hello.component';

@NgModule({
imports: [
    HelloRoutingModule
],
declarations: [HelloComponent]
})
export class CustomersModule { }

E o módulo hello-routing.module ficaria assim:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HelloComponent } from './hello.component';


const routes: Routes = [
{
    path: '',
    component: HelloComponent
}
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HelloRoutingModule { }

Note que importamos um módulo de roteamento criado com RouterModule.forChild(routes). Isso significa que esse módulo de roteamento só tratara de subrotas. No nosso caso, todas as rotas que vierem como /hello/subrota, por exemplo /helo/teste. O path para o componente HeloComponent ficou como path: '' porque o component: HelloComponent deve ser carregado quando a url for /hello/.

Me diz depois o que achou e se funcionou pra vc

Opa! Valeu pela resposta, vou tentar aplicar hoje, mas acho que entendi a ideia. E não imaginei que a solução ia ficar muito grande haha Abrirei novos tópicos para as outras questões. E assim que eu conseguir aplicar o que me encaminhou, eu dou um retorno! Valew!

Opa! Demorou mas consegui! \o/ Agora só preciso criar um module pra todo component, e alterar a maneira que faço o roteamento, mas agora já peguei o jeito =] Valew!