Why lazyload is not working on submodules? - angular-ui-router

Question

I have a little question , i try to customize my router for lazy load Angular CLI 8 , if i try to put loadChildren on sub modules i have some errors.
app.routing.ts
import { CommonModule, } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './login/login.component';
import {CoreComponent} from './core/core.component';
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: 'login',
component: LoginComponent
},
{
path: '',
component: CoreComponent,
children: [
{
path: '',
loadChildren: () => import('./core/core.module').then(mod => mod.CoreModule)
}
]
}
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
RouterModule.forRoot(routes , {
enableTracing: false
})
],
exports: [
RouterModule
],
})
export class AppRoutingModule { }
on core.module.ts -> This is working
import { RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { CoreRoutes } from '../_config/route';
import { TableListComponent } from '../table-list/table-list.component';
import { TypographyComponent } from '../typography/typography.component';
import { IconsComponent } from '../icons/icons.component';
import { MapsComponent } from '../maps/maps.component';
import { NotificationsComponent } from '../notifications/notifications.component';
import { UpgradeComponent } from '../upgrade/upgrade.component';
import {UsersComponent} from '../users/user-list/users.component';
import {UserDetailsComponent} from '../users/user-details/user-details.component';
#NgModule({
imports: [
CommonModule,
RouterModule.forChild(CoreRoutes)
],
declarations: [
TableListComponent,
TypographyComponent,
IconsComponent,
MapsComponent,
NotificationsComponent,
UpgradeComponent,
UsersComponent,
UserDetailsComponent
],
providers : [
]
})
export class CoreModule {}
on route.ts - > in this case loadchildren only works if i include full path like this '../dashboard/dashboard.module#DashboardModule'
import { AuthGuard } from '../_helpers';
import {SandboxComponent, UsersComponent} from '../users/user-list/users.component';
import {UserDetailsComponent} from '../users/user-details/user-details.component';
export const CoreRoutes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('../dashboard/dashboard.module').then(mod => mod.DashboardModule),
// '../dashboard/dashboard.module#DashboardModule'
canActivate: [AuthGuard],
},
{
path: 'users',
component: UsersComponent,
children: [
{ path: 'sandbox', component: SandboxComponent } // url: about/item
]
},
{
path: 'users/sandbox',
component: UsersComponent
},
{ path: 'user/:id', component: UserDetailsComponent }
];
ERROR in src\app\core\core.module.ts(18,31): Error during template compile of 'CoreModule'
Function expressions are not supported in decorators in 'CoreRoutes'
'CoreRoutes' contains the error at src\app\_config\route.ts(8,23)
Consider changing the function expression into an exported function.```

Answer 1

I find the problem with this.
The problem was when i started the server with --aot (Ahead Of Time) parameter and CLI version is 7.X , if i run simple like ng serve everything works (JIT - Just in time) compiler.
According there documents https://angular.io/guide/aot-compiler this is coming from 6 CLI version and something happens after update CLI to 7 / 8