How to name Lazy Chunk File during build angular

Question

I have these lazy chunk files during build production. There are many lazy chunk file, why are the name part empty ?

sample of lazy load module defined in routing module

  {
    path: 'learning-path',
    loadChildren: () => import('../dashboard/learning-path/learning-path.module').then(m =>m.LearningPathModule) 
  },
  {
    path: 'account',
    loadChildren: () => import('../dashboard/account/account.module').then(m =>m.AccountModule) 
  },
  {
    path: 'calendar',
    loadChildren: () => import('../dashboard/calendar/calendar.module').then(m =>m.CalendarModule) 
  },
  {
    path: 'coaches',
    loadChildren: () => import('../dashboard/coaches/coaches.module').then(m =>m.CoachesModule) 
  },
  {
    path: 'schedule-calendar',
    loadChildren: () => import('../dashboard/schedule-calendar/schedule-calendar.module').then(m =>m.ScheduleCalendarModule) 
  },
  {
    path: 'schedule-sessions',
    loadChildren: () => import('../dashboard/schedule-session/schedule-session.module').then(m =>m.ScheduleSessionModule) 
  },

Answer 1

• Navigate to angular.json file
• Navigate -> projects -> -> architect -> build -> configuration -> e.g Production, development, staging -> set true for named chunk in order to show named lazy chunk file

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          ...
          "configurations": {
            "production": {
               ...
              "namedChunks": true,
              ...
            }
          }
        }