ng build - Add option to save bundled js files in different directory and index in different directory

[naveedahmed1]

Here is a feature request.

When we build a project using ng build command, it creates a folder dist and place all bundles and index file in it. I know that we can specify the outdir in angular-cli.json and cli will generate all bundles and index.html file in the specified folder.

What if there is a need to put the bundled js files in a separate directory and index file in separate directory e.g

bundled js in
/dist/js/ folder

and index file in
/dist/ folder

I tried, copying the generated js bundles to the dist/js folder and updated the paths in index file but it didn't work and console shows 404 error for bundles.

It would be good to add an option to specify path for the bundled js files and index file.

[filipesilva]

Dupe of #2276

[anilarya]

Its not duplicate of #2276 , but valid question. I also need to separate built index.html and all js files in separate folder.

[yasarkunduz]

The --deploy-url flag (that does what --public-path does for webpack) has been around for a while: https://github.com/angular/angular-cli/wiki/build

[yaniv1988]

+1 Any update on this ? I am facing a similar issue.

[ryanlangton]

There is still no solution to this that I've found.. why is this closed?
--deploy-url and --base-href correctly set values in index.html.
Neither of these address the problem of wanting to put index.html in one folder and all the bundled .js files in another. What is the solution?

[BenjaminDiscoVergy]

@filipesilva if you're looking for a duplicate of this, then try this one:
#2951

I'm not sure if the duplicate you've assigned is an actual duplicate. It seems different.

On this ticket:
I am disappointed in the fact that Angular-CLI is taking away useful options that webpack had already provided. (Especially given the fact that Vue-CLI provides just that kind of functionality)

We here at the company are migrating away from some old structures but we cannot move all at once.

So for the next year or 2 we will be having a scenario that requires the index-file to sit in a folder location that is not a child of the dist-folder but more like the great-uncles neighbors friend-who-he-met-at-a-bars sibling nth-removeds dogs hairstylist.

So: "(How) can i make index end up in that separate folder?"
is a vital question for our efforts to ditch the old crap in favor of angular.

I find it hard to imagine we are the only company that made a too-quick choice of how to deliver frontends. Migrating from these mistakes to Angular will usually be a stepwise process.
Being able to support this process should be rather beneficial to Angular and Webdevelopment in general.

[fmflame]

@filipesilva This is exactly what I am trying to do:
"
What if there is a need to put the bundled js files in a separate directory and index file in separate directory e.g"

bundled js in
/dist/js/ folder

and index file in
/dist/ folder
"

Currently I only found out that I can use ng build --deploy-url "js/" to update the location of the js files in the index.html, but the .js files are still being output in the dist folder when I want them to be output in the dist/js/ folder.

I want to do this since I was explained that our current server setup has some request limits for prefixes. Prefixes = folders. So if I keep many files in one folder. That limit is hit very fast. So I want to move the .js files in our project in another folder.

2 years later I find I still have to do it with a build script...? I could not find an option in angular.json to change the .js bundles output location. Did I miss something? Or what is the progress with this?

Thank you.

[fedotxxl]

Why is this ticket closed?! This is a major bug which forces us to use js files in root directory which is not possible in some cases. I can't even imagine that it's not implemented.

--deploy-url is not the solution because dev environment should be equal to prod

[zakjakub]

Some hack available? I need to have index.html in other folder too and can't get in to working state. :/

[anupsahu02]

+1 for this

[stephdz]

+1 we need this feature !

[softdays]

+1 please @filipesilva reopen this issue. We can achieve this goal using native Webpack, so please remove this limit from angular-cli

[brian-duffy]

+1 for this please!!!!!!!

[olfek]

Hello, I'm in need of this too @filipesilva

I'm using the Django web framework, and I need to run some server side logic before I provide the Angular index.html. To do this, I need to store it as a template, which requires putting it in a special folder separate folder from the other css/js files.

The index.html stored as a template connects with the separately stored static css/js files without any effort thanks to --deploy-url.

The directory structure looks something like this:

. // <- project root
├── ...
│   
├── foo
│   ├── ...
│   ├── static
│   │   ├── bar                             // <- css/js files stored in this directory
│   │   │   ├── es2015-polyfills.js
│   │   │   ├── es2015-polyfills.js.map
│   │   │   ├── favicon.ico
│   │   │   ├── main.js
│   │   │   ├── main.js.map
│   │   │   ├── polyfills.js
│   │   │   ├── polyfills.js.map
│   │   │   ├── runtime.js
│   │   │   ├── runtime.js.map
│   │   │   ├── styles.js
│   │   │   ├── styles.js.map
│   │   │   ├── vendor.js
│   │   │   └── vendor.js.map
│   │   ├── ...
│   ├── templates // <- special folder for templates
│   │   ├── ...
│   │   ├── index.html // <- Angular index.html file
│   │   ├── ...
│   ├── ...
│   └── views.py // <- view controllers can only look in templates directory
├── ...

At the moment, I have to build the entire app into static/bar/ and then manually move the index.html to the correct place in templates/.

I need a one-liner than can build the app, put the css/js files in the static/bar/ directory, and the index.html in the templates directory.

[anja78]

Hi All, do we have any update on this? I am having same issue and not being able to fix @filipesilva.

[mpssantos]

I am having this issue as well. I am trying to separate in a different folder than the root folder the "js" and fonts files.

[diegozambrana]

I found this video https://www.codingforentrepreneurs.com/projects/angular-django/ng-build-django-static that help a little, but I hope someone fix this issue soon

[softdays]

For anyone needs a way to achieve this goal through angular-cli, please have a look here:
softdays/angularcli-index-location@c9918fd

Key steps

• npm i -D @angular-builders/custom-webpack
• angular.json > projects > your-project-name > architect > build > replace builder value by:
  • "builder": "@angular-builders/custom-webpack:browser"
• angular.json > projects > your-project-name > architect > build > options > outputPath:
  • Prepend output path with your subfolder, i.e. "outputPath": "dist/app"
• angular.json > projects > your-project-name > architect > build > options, add:

  "customWebpackConfig": { 
      "path": "./extra-webpack.config.js", 
      "replaceDuplicatePlugins": true 
  }`
  

• angular.json > projects > your-project-name > architect > build > configurations, add:

  "deployUrl": "app/",
  "baseHref": "",
  

• Create extra-webpack.config.js file at project root with the content below:

  const fs = require('fs');
  module.exports = (config, options) => {
      config.plugins.push({
          apply: (compiler) => {
              compiler.hooks.afterEmit.tap('MyAfterEmitPlugin', (compilation) => {
                  // Replace 'app' path below with your subfolder path
                  fs.renameSync('./dist/app/index.html', './dist/index.html');
                  fs.renameSync('./dist/app/favicon.ico', './dist/favicon.ico');
              });
          }
      });
      return config;
  };
  

[MikeKGilmore]

I'd like to weigh in and ask for this feature as well.

SharePoint (2013) has a hard requirement for placing assets and pages in different directories (libraries). The current angular-cli requirement of index.html being adjacent to other assets works fine for local development purposes but when deploying to production (on a SharePoint farm) it becomes highly problematic - often requiring that paths to assets be rewritten. I suspect that more recent versions of SharePoint still has this requirement.

[se-panfilov]

You also need this feature if you want to use angular with github pages

[paulwscom]

+1 for this

[Pradeep-nomad]

Is there a way to split my chunk files in n different folders project wise?? I have multiple projects in single directory. After ng build I get 15 chunks. 5 belongs to each project. I want them to be in serparate folder in the name of the project. Is there a configuration that we can do in angular.json or using webpack and achieve this?? Please comment.

This will be very helpful if we have multiple projects in a single directory and we want to deploy only the specific project chunk files in the server.

[moussa-b]

Here is how I do that : in the file package.json, below the scripts node, I add a script called postbuild that will :

1. Move the files in the dedicated folder (resources in my example)
2. Search and replace <script src="*.js"></script> in index.html by <script src="resources/*.js"></script>. The search and replace is done with sed commande line (please be aware that there are some difference with sed commande line on linux or MacOS).

Here is the final look of my package.json file :

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "postbuild": "mv ./dist/my-project/*.js ./dist/my-project/*.js.map ./dist/my-project/resources; sed -i -e 's/src=\"/src=\"resources\\//g' dist/my-project/index.html",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

[popsovy]

+1 for this. We need to be able to have Index.html in the root and scripts in a separate folder. One common case for this is when we integrate an angular application into a another web project, and that other web demands that the js files are stored in a separate folder.

[ilpredo]

@moussa-b
2. just put "deployUrl" in your angular.json

This work for me. Thanks

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}