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,
              ...
            }
          }
        }

Answer 2

Most likely you are not using the flag namedChunks while building or serving your application.

Note that you can directly add the flag to your angular.json file or if you have a custom script in your package.json file you can simply add it to your settings:

IE:

...
"scripts": {
  "build-custom": "npm run build --configuration=production --aot=true --named-chunks=true --source-map=true
}
...