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

Do you have internationalisation set up?

Will Alexander
– Will Alexander

2022-02-17 15:28:09 +00:00
Commented Feb 17, 2022 at 15:28 — Will Alexander
– Will Alexander, Commented Feb 17, 2022 at 15:28
No. but angular universal

Santosh
– Santosh

2022-02-17 15:54:02 +00:00
Commented Feb 17, 2022 at 15:54 — Santosh
– Santosh, Commented Feb 17, 2022 at 15:54

khizerrehandev · Accepted Answer · 2022-09-21 07:24:40Z

3

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

answered Sep 21, 2022 at 7:24

khizerrehandev

1,57717 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jacopo Sciampi · Accepted Answer · 2022-02-17 15:39:15Z

1

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

edited Feb 17, 2022 at 15:39

answered Feb 17, 2022 at 15:33

Jacopo Sciampi

3,5042 gold badges26 silver badges52 bronze badges

2 Comments

Santosh Over a year ago

With this command I am able to see file name on left column but the Name column is still blank and its same like the name column in screenshot.

Raid Over a year ago

Like most build options, this can be put in angular.json. You can find it in projects/<projectname>/architect/build/options/"namedChunks": true (as @khizer 's answer states)

Collectives™ on Stack Overflow

How to name Lazy Chunk File during build angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related