What is the best way to organize chunk files into their own directory during the execution of ng build?

Question

What is the best way to organize chunk files into their own directory during the execution of ng build?

Is there a way to customize the configuration in order to automatically create separate folders within the "dist" directory for each chunk file in Angular 2?

Currently, when I use ngcli and build my project with ng build, it generates the "dist" folder, which is great.

Here is the basic structure of my project:

https://i.sstatic.net/T0WQM.png

However, I would like all *.chunk.js and *.map files to be placed in their respective folders within the dist directory. For example:

dist/modules/0.chunk.js

dist/modules/0.map

This way, the overall structure will resemble...

https://i.sstatic.net/auIDh.png

angular typescript

Answer 1

Answer №1

Although this issue may seem a bit dated, I encountered the same problem while working with Angular CLI versions 7 and 8.

As per the Angular documentation, options like '--resourceOutputPath' and '--deployUrl' were suggested. However, I found that --resourceOutputPath only worked for assets defined in stylesheets, and --deployUrl did not organize the assets into a separate folder as needed.

To address this, my current workaround involves:

Setting the 'baseHref' option in the build configuration to '/static-files/'
Copying the index.html file from the output folder and moving it up one directory level.

This approach results in a structure like this:

/dist
   index.html
   /static-files
      chunk1.js
      chunk2.js
      etc

While this method places all assets in a separate folder, not just JavaScript files, it serves its purpose effectively for me.

Note: If you are also utilizing Angular Routing, remember to manually set the 'APP_BASE_HREF', as the router will otherwise search for 'staric-files' in the URL (https://angular.io/api/common/APP_BASE_HREF)

Answer 2

Although this issue may seem a bit dated, I encountered the same problem while working with Angular CLI versions 7 and 8.

As per the Angular documentation, options like '--resourceOutputPath' and '--deployUrl' were suggested. However, I found that --resourceOutputPath only worked for assets defined in stylesheets, and --deployUrl did not organize the assets into a separate folder as needed.

To address this, my current workaround involves:

Setting the 'baseHref' option in the build configuration to '/static-files/'
Copying the index.html file from the output folder and moving it up one directory level.

This approach results in a structure like this:

/dist
   index.html
   /static-files
      chunk1.js
      chunk2.js
      etc

While this method places all assets in a separate folder, not just JavaScript files, it serves its purpose effectively for me.

Note: If you are also utilizing Angular Routing, remember to manually set the 'APP_BASE_HREF', as the router will otherwise search for 'staric-files' in the URL (https://angular.io/api/common/APP_BASE_HREF)

Answer 3

Answer №2

To optimize your Angular app, you can utilize Angular CLI to create multiple NgModules and implement Lazy Loading in the Router configuration. This way, when you run ng build --prod, each module will be stored in a separate file for improved performance.

If you want to learn more about lazy loading in Angular, check out these recommended articles:

Answer 4

To optimize your Angular app, you can utilize Angular CLI to create multiple NgModules and implement Lazy Loading in the Router configuration. This way, when you run ng build --prod, each module will be stored in a separate file for improved performance.

If you want to learn more about lazy loading in Angular, check out these recommended articles:

Answer 5

Answer №3

Consider utilizing a distinct build tool such as gup or grunt, which can organize the chunk files into a separate directory. Alternatively, you could implement a Compiler option like { outDir: 'src/chunk' } in your tsconfig.json file. Give this a try to see if it resolves the problem you are experiencing.

Answer 6

Consider utilizing a distinct build tool such as gup or grunt, which can organize the chunk files into a separate directory. Alternatively, you could implement a Compiler option like { outDir: 'src/chunk' } in your tsconfig.json file. Give this a try to see if it resolves the problem you are experiencing.

What is the best way to organize chunk files into their own directory during the execution of ng build?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing AJAX or Angular in Django

How can I implement a master-detail view in Angular 2?

The counterpart to node's http-proxy in the .NET framework

Having trouble with my React component timer not functioning properly

Utilizing Next.js and React to interact with Open AI through API requests

Angular 2 template can randomly display elements by shuffling the object of objects

How can time duration be accurately represented in TypeScript?

Loading CSS files conditionally in Angular2's index.html

What is the best way to change a number into a byte string using TypeScript?

Adding a baseURI to the image src in Angular 5 is causing issues with dynamically loading images

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

Detecting the language of a browser

Angular2: PrimeNG - Error Retrieving Data (404 Not Found)

Tips for importing several makeStyles in tss-react

Guide to connecting an object's attribute with an Angular2 form element using select

Build an Angular application without relying on the Angular CLI tool

Discover the potential of JavaScript's match object and unleash its power through

Sharing Pictures and Messages using angular, express, and multer

Creating and sharing a project in Typescript

What is the reason for the restriction on CORS with a custom scheme handler in AddCrossOriginWhitelistEntry or IsCorsEnabled?