2

Olá boa tarde a todos...

Sou desenvolvedor angular a algum tempo, e já me deparei com duas forma de realizar o famoso Lazy-loaded, que são:

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

e

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

eu procurei na internet a diferença dos dois porém nunca encontrei nada referente!

Gostaria de saber se realmente existe uma diferença entre essas duas chamadas, ou são apenas formas diferentes de fazer a mesma coisa??

De qualquer forma agradeço desde já...

2 Respostas 2

1

Basicamente a primeira forma é a antiga que usávamos até o Angular 7 e a segunda é a nova forma introduzida no Angular 8. A segunda acaba sendo mais confiável, pois a sua IDE consegue te ajudar mais na importação, é o padrão do EC2020 e mais simples de entender por quem não está ambientado com o framework.

É interessante notar a motivação de tais formas, na época que até o Angular 7 foi desenvolvido poucos browsers suportavam o import, por esse motivo escolheram o caminho da primeira forma. Aqui eles explicam mais detalhado.

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

Porém como hoje ele já é suportado por vários browsers eles resolveram adotar, seguindo assim o padrão do ES2020

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

Hoje ainda as duas formas funcionam, porém a feita com string está depreciada, provavelmente nas próximas versões deve ser descontinuada.

1

A primeira forma

{ path: 'rota', loadChildren: '../module/function.module#FunctionModule'}

É a forma mais antiga de como era feito quando saiu o Angular2, no entanto por ser um path dentro de uma string, é mais sucetivel a erro. No entanto por motivos de legado se mantem funcionando.

Essa forma aqui é mais nova:

{ path: 'rota', loadChildren: () => import('../module/function.module').then(m => m.FunctionModule)}

Ela garante que você está importando certo. Por exemplo vc pode apertar ctrl mais FunctionModule e ele vai te levar ao modulo pra você ver se é realmente o modulo que você quer. Sendo assim fica mais explicito os imports.

2
  • Entendi perfeitamente. Só para confirmar, isso não leva nenhum ganho de performance na aplicação? Commented 2/12/2019 às 20:53
  • Não mas eu refatorei pro modo novo na minha aplicação porque esses legados nunca se sabe até quando eles vão dar suporte. Commented 2/12/2019 às 21:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .