Olá, pessoal! Utilizo a versão 9.0.7 do angular no momento e o lazy load só funcionou com a sintaxe abaixo: { path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then(m => m.CursosModule)}, Apesar desta sintaxe parecer mais complexa que a mostrada no vídeo, com essa sintaxe o intelisense é capaz de nos ajudar autocompletando o caminho do module, bem como, o nome da classe. Valeu!!
Uso a versão 11 do angular. A partir da versão 8 do anguar, o lazy loading com loadChildren foi descontinuada. A partir da versão 8 do angular, usa-se o loadChildrenCallback que está descrito na documentação do angular. Fica assim: { path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then( mod => mod.CursosModule )} Suas aulas estão boas, Loiane.
No Angular 8 o LoadChildren foi depreciado, eu consegui resolver utilizando o LoadChildrenCallbach que é uma das sugestões que a documentação sugere e ficou assim { path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then(mod => mod.CursosModule), },
Obrigado! No Angular 10 se tiver classe não referenciada também ocorre o erro ainda não resolvido: "Error: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.". Com este uso de função para importar o módulo, o problema é resolvido. Obs.: Onde tem Microsoft, tem bugs deste tipo. Só para constar.
4 ปีที่แล้ว
Vlw. Estou usando o Angular 10 e vi que era essa a forma atual de ser usar o LoadChildren
Obrigado pelo excelentíssimo conteúdo Loiane. A qualidade de ensino que você dispôs a nos proporcionar é fenomenal, estou aprendendo com uma velocidade absurda ! No entanto essa aula eu tive dificuldades. Não importa o que eu faça ainda está retornando erro no ID. Como estou usando a versão mais recente do angular (16) estou me atualizando junto da documentação conforme vou seguindo seu curso, também com a ajuda dos colegas nos comentários. O modo de informar o caminho usando o loadChildren sofreu algumas mudanças mas consegui aplicar essa parte sem problemas. O problema na realidade é que quando eu tiro os imports do module a coisa complica, começa a aparecer erro por todo lado. Bem como com a retirada dos caminhos 'cursos' e 'alunos' no routing.module os erros começam a aparecer um atrás do outro. Quando eu adiciono os imports no module e adiciono os caminhos no routing.module, a aplicação volta a funcionar normalmente, mas sem o lazy. Olhei na documentação e está da mesma maneira como ensinou no video (com as mudanças na aplicação apenas), o que me intriga, porque aparentemente está tudo correto. Já estou a 3 dias com esse problema, e eu preciso mesmo fazer esse lazy loading funcionar porque meu projeto pessoal vai precisar, bem como minha carreira futura 😂😂 Novamente agradeço o carinho e dedicação. Você é realmente um anjo na vida de varias pessoas, tanto que não me canso de divulgar seu nome para todos que querem entrar na área ! Um abraço e até logo
Da hora, complexo mas da hora. No Angular 8 já dá pra fazer diferente: { path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then(m => m.CursosModule)}, mais complexo ainda kkkk
Pra mim, ainda não está funcionando Eduardo. Eu coloquei o seu código tirei o CursosModule do app.Module, foi no routing.module deixei o caminho de cursos vazios e nada... :(
Perfeito! Deu pra perceber um ganho de performance na quantidade de dados carregados quando acesso somente a página Home. Me lembro bem quando a um ano atrás quando eu estava desenvolvendo um projeto com AngularJS e tive que usar um plugin chamado 'ozLazyLoad'. Bem, tive muitos problemas com isso, rs. Hoje ficou tão simples e fácil com Angular 2+
To seguindo seu curso de ponta a ponta. Parabéns. Nesse ponto fiquei com uma quando reescreveu. Modulos podem ser reaproveitados. O Modulo App "colocou" o modulo curso em /cursos mas se ele colocasse em outro local, exemplo /cursinhos o seu modulo iria quebrar novamente pois esta hardcode /curso/naoencontrado. Como melhorar isso?
Loiane, muito obrigado por compartilhar conhecimento. Parabéns pelo curso. :) Gostaria de uma dica de boa prática, cenário: num projeto de grandes dimensões, caso eu necessite refatorar os paths de rotas, eu teria que sair alterando também todos os paths relacionados na aplicação (this.router.navigate(), routerLink ...). Qual seria a melhor estratégia para minimizar o impacto desse refactor de paths de rotas? Poderia ter um local centralizado que poderia ser um arquivo com constantes de rotas ou tem uma estratégia mais adequada no Angular que eu possa ter uma estrutura de dados num local centralizado também com essas rotas definidas?
Para quem está tendo problemas com rotas filhas e estado ativo ( diretiva routerLinkActive ), utilizar na marcação da rota pai: *[routerLinkActiveOptions]="{exact: true}"* Lista de Livros Cadastro de Livros Sem isto quando a rota */livros/novo* estava ativa, ele adicionava a classe *active* também para */livros.*
Bom dia. não entendi esse erro. ja refiz tudo algumas vezes. e ele continua. ERROR in Could not resolve "app/cursos/cursos.module" from "C:/wamp64/www/angular2/rotas/src/app/app.routing.module.ts". pergunta o CursosModule, tem que ser removido do app.routing.module.ts também? ou la permanece? ja tentei das duas formas.
Sim, tem que remover (o import tb). Pare o terminal, faça as mudanças e depois rode o comando ng serve novamente. Esse erro pode acontecer pq o angular cli não consegue achar a mudança, por isso é importante que o comando seja executado apenas depois das mudanças.
Pra galera que ta fazendo em angular 6.x: usar "../app", conform linha abaixo: {path: 'cursos', loadChildren: '../app/cursos/cursos.module#CursosModule'}, Fonte: dev.to/saigowthamr/how-to-implement-lazy--loading-in-angular-6-3ple
Na verdade precisa add o src, só com os .. nao funciona, tive que implementar seguindo aqui: stackoverflow.com/questions/41396839/exception-uncaught-in-promise-error-cannot-find-module-app-home-home-modul
Loiane parabéns por mais uma aula fantástica! Sobre o carregamento lazy loading posso usar em todos os projetos ou há caso especifico para o uso? Obrigado.
Parabéns Loaine!! Virei seu fã assim q comecei a assistir suas aulas!! Estou com um problema para fazer um lazy loading de uma rota filha. Está dando "Cannot find module 'app/agenda/agenda.module'!! o app.routing.module está assim: const APP_ROUTES: Routes = [ {path: 'login', component: LoginComponent}, {path: '', canActivate: [AuthGuard], component: MainComponent, children: [ {path: '', component: DashboardComponent}, {path: 'dashboard', component: DashboardComponent}, {path: 'agenda', loadChildren: 'app/agenda/agenda.module#AgendaModule' }, ]}, { path: '**', redirectTo: '' } ]; Tem alguma dica para mim??! Abraço
Sim, pode ter o nível de rotas encadeadas que for necessário. Precisa configurar as rotas filhas-filhas no children da rota filha e não esquecer de adicionar o router-outlet no template do componente da rota filha que tem filhos também.
Boa noite, mulher maravilha rsrsrsrs! Faz 2 dias que estou tentando resolver isso.... Uncaught Error: Component CursosComponent is not part of any NgModule or the module has not been imported into your module. Mas CursosComponent está devidamente importado no CursosModule. **Não estou utilizando ng serve, meu app Angular está sendo servido dentro da minha aplicação de back-end Laravel. Executo npm run build com o caminho da pasta no Laravel para fazer o build do projeto Angular la dentro. Eu to achando que pode ter a ver com o SharedModule que criei para alocar as importações dos components do Angular Material e dar uma limpada no AppModule.... Tanto o AppModule quanto o CursosModule recebem o SharedModule na importação para utilizar os components do Angular Material... será que tem alguma relação com isso? Pois a unica coisa diferente que fiz dos seus passos em meu projeto foi isso. /////////////////////////////////////////////////////////////////////////// ///////////////////////////// AP MODULE ////////////////////////// ///////////////////////////////////////////////////////////////////////// import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { FlexLayoutModule } from '@angular/flex-layout'; import { AppComponent } from './app.component'; import { SharedModule } from './shared/shared.module'; import { HomeComponent } from './home/home.component'; import { LoginComponent } from './login/login.component'; import { AppRoutingModule } from './app.routing.module'; @NgModule({ declarations: [ AppComponent, HomeComponent, LoginComponent, ], imports: [ BrowserAnimationsModule, HttpClientModule, FlexLayoutModule, SharedModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// //////////////////// APP ROUTING MODULE ///////////////// ///////////////////////////////////////////////////////////////////////// import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; const AppRoutes: Routes = [ { path: '', component: HomeComponent }, { path: 'cursos', loadChildren: 'src/app/cursos/cursos.module#CursosModule' }, { path: 'login', component: LoginComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(AppRoutes) ], exports: [RouterModule] }) export class AppRoutingModule { } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// //////////////////// CURSOS MODULE ////////////////////// /////////////////////////////////////////////////////////////////////// import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CursosComponent } from './cursos.component'; import { SharedModule } from '../shared/shared.module'; import { CursosRoutingModule } from './cursos.routing.module'; import { CursosService } from './cursos.service'; @NgModule({ declarations: [ CursosComponent, ], imports: [ CommonModule, SharedModule CursosRoutingModule ], providers: [ CursosService ] }) export class CursosModule { } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////// /////////////// CURSOS ROUTING MODULE /////////////////// ///////////////////////////////////////////////////////////////////////////// import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CursosComponent } from './cursos.component'; const cursosRoutes: Routes = [ { path: '', component: CursosComponent } ]; @NgModule({ imports: [ RouterModule.forChild(cursosRoutes) ], exports: [RouterModule] }) export class CursosRoutingModule { } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////// /////////////////////// SHARED MODULE ///////////////////////// ///////////////////////////////////////////////////////////////////////////// import { NgModule } from '@angular/core'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatCardModule } from '@angular/material/card'; import { MatChipsModule } from '@angular/material/chips'; import { MatTabsModule } from '@angular/material/tabs'; import { MatGridListModule } from '@angular/material/grid-list'; import { MatTableModule } from '@angular/material/table'; @NgModule({ imports: [ MatButtonModule, MatToolbarModule, MatListModule, MatIconModule, MatSidenavModule, MatCardModule, MatChipsModule, MatTabsModule, MatGridListModule, MatTableModule], exports: [MatToolbarModule, MatButtonModule, MatListModule, MatIconModule, MatSidenavModule, MatCardModule, MatChipsModule, MatTabsModule, MatGridListModule, MatTableModule], }) export class SharedModule { } ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Já rodei a internet inteira, não encontrei a luz... :(
Encontrei o erro... O CursosComponent estava importado em outro modulo, porque eu havia criado outro módulo a partir da duplicação do CursosModule, modifiquei o nome do novo módulo mas esqueci os components do CursosModule importados lá dentro.... Passou esse erro, o chunk está sendo gerado, mas agora estou com outro erro: Uncaught SyntaxError: Unexpected token < core.js:15724 ERROR Error: Uncaught (in promise): Error: Loading chunk src-app-cursos-cursos-module failed. o arquivo chunk aparece na aba Network quando acesso o link do Cursos, mas parece que o caminho do arquivo não é correto... acredito que por eu estar servindo a aplicação dentro do Laravel deve haver algum conflito e deve ser necessária alguma configuração adicional... :(
Consegui! No build do Angular eu marco o --output-path para "public/js/" do projeto Laravel para que os arquivos dist do Angular fiquem alocados lá. - main - polyfills - runtime - src-app-cursos-cursos-module (chunk - lazy loading) - styles - vendor Eu preciso fazer uma referencia no Index do Laravel para que ele carregue os arquivos do Angular passando o caminho /js.. exemplo: Como os arquivos chunk lazy loading são dinâmicos, carregados em tempo de execução, eles são procurados em /public quando chamamos a rota com lazy loading, que é o padrão, e não em /public/js/ Deve haver uma forma de configurar esse path padrão, como não sei, o que fiz foi mudar o build do angular para /public ... Assim, tanto os arquivos base do projeto quanto os chunks do lazy loading podem ser localizados em um único path. Vlww!!!
Olá, pessoal! Utilizo a versão 9.0.7 do angular no momento e o lazy load só funcionou com a sintaxe abaixo:
{ path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then(m => m.CursosModule)},
Apesar desta sintaxe parecer mais complexa que a mostrada no vídeo, com essa sintaxe o intelisense é capaz de nos ajudar autocompletando o caminho do module, bem como, o nome da classe.
Valeu!!
@Luiz Fernando por nada, amigo!
Muito obrigado! Me ajudou aqui também.
@@Thiago-i1b8i show de bola!
Aqui só funcionou desse jeito. Obrigada.
Funcionou somente assim também. Valeu.
Uso a versão 11 do angular. A partir da versão 8 do anguar, o lazy loading com loadChildren foi descontinuada. A partir da versão 8 do angular, usa-se o loadChildrenCallback que está descrito na documentação do angular. Fica assim:
{ path: 'cursos',
loadChildren: () => import('./cursos/cursos.module').then(
mod => mod.CursosModule
)}
Suas aulas estão boas, Loiane.
Olá, para quem tá fazendo o curso com Angular 7+
Nesta versão, no 4:34 'loadChildren', não deve-se iniciar o caminho com 'app/', e sim, com './'
Ótimo, cara! Estava com erro no lazy e era justamente isso. Grato!
obrigado ajudou bastante :)
verdadeiros heróis não vestem capa. rs
Valeu Amauri !
Deus te abençoe seu abençoado
No Angular 8 o LoadChildren foi depreciado, eu consegui resolver utilizando o LoadChildrenCallbach que é uma das sugestões que a documentação sugere e ficou assim
{ path: 'cursos',
loadChildren: () => import('./cursos/cursos.module').then(mod => mod.CursosModule), },
vlws
eu to no 8 tb e só troquei o 'app/....' por './....'
Show.
LoadChildrenCallback implementa "Dynamic Imports" segue mais informações developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports
Obrigado! No Angular 10 se tiver classe não referenciada também ocorre o erro ainda não resolvido: "Error: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.".
Com este uso de função para importar o módulo, o problema é resolvido.
Obs.: Onde tem Microsoft, tem bugs deste tipo. Só para constar.
Vlw. Estou usando o Angular 10 e vi que era essa a forma atual de ser usar o LoadChildren
Obrigado pelo excelentíssimo conteúdo Loiane.
A qualidade de ensino que você dispôs a nos proporcionar é fenomenal, estou aprendendo com uma velocidade absurda !
No entanto essa aula eu tive dificuldades. Não importa o que eu faça ainda está retornando erro no ID.
Como estou usando a versão mais recente do angular (16) estou me atualizando junto da documentação conforme vou seguindo seu curso, também com a ajuda dos colegas nos comentários.
O modo de informar o caminho usando o loadChildren sofreu algumas mudanças mas consegui aplicar essa parte sem problemas.
O problema na realidade é que quando eu tiro os imports do module a coisa complica, começa a aparecer erro por todo lado.
Bem como com a retirada dos caminhos 'cursos' e 'alunos' no routing.module os erros começam a aparecer um atrás do outro.
Quando eu adiciono os imports no module e adiciono os caminhos no routing.module, a aplicação volta a funcionar normalmente, mas sem o lazy.
Olhei na documentação e está da mesma maneira como ensinou no video (com as mudanças na aplicação apenas), o que me intriga, porque aparentemente está tudo correto.
Já estou a 3 dias com esse problema, e eu preciso mesmo fazer esse lazy loading funcionar porque meu projeto pessoal vai precisar, bem como minha carreira futura 😂😂
Novamente agradeço o carinho e dedicação.
Você é realmente um anjo na vida de varias pessoas, tanto que não me canso de divulgar seu nome para todos que querem entrar na área !
Um abraço e até logo
Da hora, complexo mas da hora.
No Angular 8 já dá pra fazer diferente:
{ path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then(m => m.CursosModule)},
mais complexo ainda kkkk
Pra mim, ainda não está funcionando Eduardo. Eu coloquei o seu código tirei o CursosModule do app.Module, foi no routing.module deixei o caminho de cursos vazios e nada... :(
Muito bom, aguardando mais aulas e conteúdos sobre Angular!
Perfeito! Deu pra perceber um ganho de performance na quantidade de dados carregados quando acesso somente a página Home. Me lembro bem quando a um ano atrás quando eu estava desenvolvendo um projeto com AngularJS e tive que usar um plugin chamado 'ozLazyLoad'. Bem, tive muitos problemas com isso, rs. Hoje ficou tão simples e fácil com Angular 2+
Gratidão!
Me senti como se estivesse em uma aula presencial, parabens.
Oi Loiane. Excelente aula! Parabéns por sua didática e obrigado por compartilhar seu conhecimento.
Haa Loiane obrigado pela suas aulas são muito boas e estou aprendendo muito de Angular
Aula ótima! Esperando a próxima ansiosamente!
Muito bom! As aulas estão de parabéns Loiane!
Excelente. Você é um presente, Loiane. Há algum lugar onde nós possamos contribuir de forma customizada, financeiramente, com suas aulas?
Dica robustíssima! Valeu, Loiane!
Gostei bastante, aplicação fica bem mais rápida.
Aqui não apareceu chunk.js não. O nome do arquivo está como "src_app_cursos_cursos_module_ts.js"
Nossa! OBRIGADO... salvou minha vida mais uma vez :*
To seguindo seu curso de ponta a ponta. Parabéns. Nesse ponto fiquei com uma quando reescreveu. Modulos podem ser reaproveitados. O Modulo App "colocou" o modulo curso em /cursos mas se ele colocasse em outro local, exemplo /cursinhos o seu modulo iria quebrar novamente pois esta hardcode /curso/naoencontrado. Como melhorar isso?
EXCELENTE A AULA!!!!!
Já estudava o novo Angular nesse ano, não sei como não tinha encontrado antes esse canal show de bola! :o
Excelente! Parabéns!
Loiane, muito obrigado por compartilhar conhecimento. Parabéns pelo curso. :)
Gostaria de uma dica de boa prática, cenário: num projeto de grandes dimensões, caso eu necessite refatorar os paths de rotas, eu teria que sair alterando também todos os paths relacionados na aplicação (this.router.navigate(), routerLink ...).
Qual seria a melhor estratégia para minimizar o impacto desse refactor de paths de rotas?
Poderia ter um local centralizado que poderia ser um arquivo com constantes de rotas ou tem uma estratégia mais adequada no Angular que eu possa ter uma estrutura de dados num local centralizado também com essas rotas definidas?
Ótima aula!!! Mas porque o main.bundle.js continuou com o mesmo tamanho 2.9M após a configuração?
Para quem está tendo problemas com rotas filhas e estado ativo ( diretiva routerLinkActive ), utilizar na marcação da rota pai: *[routerLinkActiveOptions]="{exact: true}"*
Lista de Livros
Cadastro de Livros
Sem isto quando a rota */livros/novo* estava ativa, ele adicionava a classe *active* também para */livros.*
Conseguiu sozinha, né?! rsrs também sou assim. Peço ajuda e logo depois acabo conseguindo resolver. Me adiciona no Hangouts.
xD
Loiane, qual será o próximo módulo?
Estou adorando o curso, muito bom mesmo.
Ainda nada. tentei de todos os jeitos. será que é alguma coisa com a minha versão do Angular? to com o 2.4.4
Bom dia. não entendi esse erro.
ja refiz tudo algumas vezes. e ele continua.
ERROR in Could not resolve "app/cursos/cursos.module" from "C:/wamp64/www/angular2/rotas/src/app/app.routing.module.ts".
pergunta o CursosModule, tem que ser removido do app.routing.module.ts também? ou la permanece?
ja tentei das duas formas.
Sim, tem que remover (o import tb). Pare o terminal, faça as mudanças e depois rode o comando ng serve novamente. Esse erro pode acontecer pq o angular cli não consegue achar a mudança, por isso é importante que o comando seja executado apenas depois das mudanças.
Pra galera que ta fazendo em angular 6.x: usar "../app", conform linha abaixo:
{path: 'cursos', loadChildren: '../app/cursos/cursos.module#CursosModule'},
Fonte: dev.to/saigowthamr/how-to-implement-lazy--loading-in-angular-6-3ple
Valeu, irmão!!
Na verdade precisa add o src, só com os .. nao funciona, tive que implementar seguindo aqui: stackoverflow.com/questions/41396839/exception-uncaught-in-promise-error-cannot-find-module-app-home-home-modul
Loiane parabéns por mais uma aula fantástica! Sobre o carregamento lazy loading posso usar em todos os projetos ou há caso especifico para o uso? Obrigado.
Pode usar e abusar! :)
Ótimo, perfeito!
Parabéns Loaine!! Virei seu fã assim q comecei a assistir suas aulas!!
Estou com um problema para fazer um lazy loading de uma rota filha. Está dando "Cannot find module 'app/agenda/agenda.module'!!
o app.routing.module está assim: const APP_ROUTES: Routes = [
{path: 'login', component: LoginComponent},
{path: '', canActivate: [AuthGuard], component: MainComponent, children: [
{path: '', component: DashboardComponent},
{path: 'dashboard', component: DashboardComponent},
{path: 'agenda', loadChildren: 'app/agenda/agenda.module#AgendaModule' },
]},
{ path: '**', redirectTo: '' }
];
Tem alguma dica para mim??! Abraço
consegui resolver dessa maneira: { path: 'cursos', loadChildren: () => CursosModule }, nao esquece de declarar o modulo
Tem alguma forma de ter rotas filhas dentro de uma outra rota filha ?
Sim, pode ter o nível de rotas encadeadas que for necessário. Precisa configurar as rotas filhas-filhas no children da rota filha e não esquecer de adicionar o router-outlet no template do componente da rota filha que tem filhos também.
Daí são rotas netas
Oi Loiane, sobre o lazy loading tem algum restrição de uso ou pelo teu feedback tu acha que pode ser usado sempre que possivel ?
Boa noite, mulher maravilha rsrsrsrs!
Faz 2 dias que estou tentando resolver isso....
Uncaught Error: Component CursosComponent is not part of any NgModule or the module has not been imported into your module.
Mas CursosComponent está devidamente importado no CursosModule.
**Não estou utilizando ng serve, meu app Angular está sendo servido dentro da minha aplicação de back-end Laravel.
Executo npm run build com o caminho da pasta no Laravel para fazer o build do projeto Angular la dentro.
Eu to achando que pode ter a ver com o SharedModule que criei para alocar as importações dos components do Angular Material e dar uma limpada no AppModule.... Tanto o AppModule quanto o CursosModule recebem o SharedModule na importação para utilizar os components do Angular Material... será que tem alguma relação com isso? Pois a unica coisa diferente que fiz dos seus passos em meu projeto foi isso.
///////////////////////////////////////////////////////////////////////////
///////////////////////////// AP MODULE //////////////////////////
/////////////////////////////////////////////////////////////////////////
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AppRoutingModule } from './app.routing.module';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
],
imports: [
BrowserAnimationsModule,
HttpClientModule,
FlexLayoutModule,
SharedModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////
//////////////////// APP ROUTING MODULE /////////////////
/////////////////////////////////////////////////////////////////////////
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
const AppRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'cursos', loadChildren: 'src/app/cursos/cursos.module#CursosModule' },
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(AppRoutes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
//////////////////// CURSOS MODULE //////////////////////
///////////////////////////////////////////////////////////////////////
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CursosComponent } from './cursos.component';
import { SharedModule } from '../shared/shared.module';
import { CursosRoutingModule } from './cursos.routing.module';
import { CursosService } from './cursos.service';
@NgModule({
declarations: [
CursosComponent,
],
imports: [
CommonModule,
SharedModule
CursosRoutingModule
],
providers: [
CursosService
]
})
export class CursosModule { }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
/////////////// CURSOS ROUTING MODULE ///////////////////
/////////////////////////////////////////////////////////////////////////////
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CursosComponent } from './cursos.component';
const cursosRoutes: Routes = [
{ path: '', component: CursosComponent }
];
@NgModule({
imports: [
RouterModule.forChild(cursosRoutes)
],
exports: [RouterModule]
})
export class CursosRoutingModule { }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
/////////////////////// SHARED MODULE /////////////////////////
/////////////////////////////////////////////////////////////////////////////
import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatTabsModule } from '@angular/material/tabs';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatTableModule } from '@angular/material/table';
@NgModule({
imports: [ MatButtonModule, MatToolbarModule, MatListModule, MatIconModule,
MatSidenavModule, MatCardModule, MatChipsModule, MatTabsModule,
MatGridListModule, MatTableModule],
exports: [MatToolbarModule, MatButtonModule, MatListModule, MatIconModule,
MatSidenavModule, MatCardModule, MatChipsModule, MatTabsModule,
MatGridListModule, MatTableModule],
})
export class SharedModule { }
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Já rodei a internet inteira, não encontrei a luz...
:(
Encontrei o erro... O CursosComponent estava importado em outro modulo, porque eu havia criado outro módulo a partir da duplicação do CursosModule, modifiquei o nome do novo módulo mas esqueci os components do CursosModule importados lá dentro....
Passou esse erro, o chunk está sendo gerado, mas agora estou com outro erro:
Uncaught SyntaxError: Unexpected token <
core.js:15724 ERROR Error: Uncaught (in promise): Error: Loading chunk src-app-cursos-cursos-module failed.
o arquivo chunk aparece na aba Network quando acesso o link do Cursos, mas parece que o caminho do arquivo não é correto... acredito que por eu estar servindo a aplicação dentro do Laravel deve haver algum conflito e deve ser necessária alguma configuração adicional...
:(
Consegui!
No build do Angular eu marco o --output-path para "public/js/" do projeto Laravel para que os arquivos dist do Angular fiquem alocados lá.
- main
- polyfills
- runtime
- src-app-cursos-cursos-module (chunk - lazy loading)
- styles
- vendor
Eu preciso fazer uma referencia no Index do Laravel para que ele carregue os arquivos do Angular passando o caminho /js.. exemplo:
Como os arquivos chunk lazy loading são dinâmicos, carregados em tempo de execução, eles são procurados em /public quando chamamos a rota com lazy loading, que é o padrão, e não em /public/js/
Deve haver uma forma de configurar esse path padrão, como não sei, o que fiz foi mudar o build do angular para /public ... Assim, tanto os arquivos base do projeto quanto os chunks do lazy loading podem ser localizados em um único path.
Vlww!!!
Show!
Show
Continua carregando todos arquivos :\