Para organizar uma aplicação Angular, a forma adequada é uma boa estruturação dos seus módulos. Eles devem ser divididos em App, Core, Share e Features.
O App, Shared e Core deve ser os únicos a serem carregados no inicio da aplicação. Daí conforme o usuário navega, os módulos Features serão carregados pela Router
.
Não dá pra fugir disso, carregar módulos sem ser pela rota, vai ser reinventar a roda, apesar de ser possível carregar um modulo na raça. Seria necessário enganar o ng builder
para ele achar que trata-se da declaração de uma rota.
export const lazyModules = {
feature: {
loadChildren: () => import('../../feature/feature.module').then(m => m.FeatureModule)
}
}
......
constructor(private injector: Injector, private compiler: Compiler)
......
lazyModules.feature.loadChildren().then(async (m) => {
const ng = m instanceof NgModuleFactory ?
m : await this.compiler.compileModuleAsync(moduleOrFactory)
ng.create(this.injector)
});
ps: converti esse código de um efeito NgRx, então deve ser necessário alguns ajutes.
Enfim, esse certamente não é o caminho, vale a pena dar uma conferida nesse artigo do Tomas Trajan:
How to architect epic Angular app in less than 10 minutes! ⏱️😅.
Aí sim, você estará configurando sua aplicação de forma modularizada e voltada para performance.
Mas lembre-se performance em Angular não deve se limitar a Carga por Demanda, uma boa gestão de estado é fundamental, separando componentes entre Smart and Dummy.
Por fim, uma última dica, dá uma olhada nesse projeto de Schematics que estou desenvolvendo:
angular-mat-baum
Espero que goste!
Abraços,
Bernardo Baumblatt.