'ng build' move scripts to subfolder

Question

ng build exports files to dist folder as follow

index.html  
main.bundle.js  
styles.bundle.js  
...

I want scripts to be in subfolder

*index.html  
scripts/main.bundle.js  
scripts/styles.bundle.js  
...*

How can I do it?

Answer 1

1. run ng eject -ec (add '-prod' for production build, or -aot false for JIT build). This command will expose webpack.config.js file in your root directory. -ec flag will extract CSS files (instead of serving them from JS file). (to 'uneject' your app again see my another answer)

2. Run npm install in order to install webpack loaders

3. In webpack.config.js file edit output entry and add your desired directory name for JS files:

   "output": { "path": path.join(process.cwd(), "dist"), "filename": "scripts/[name].[chunkhash:20].bundle.js", "chunkFilename": "scripts/[id].[chunkhash:20].chunk.js" }

4. because we added -ec flag to ng eject command, we now have CSS file(s) as well. We can also move it to dist/styles by modifying ExtractTextPlugin plugin under plugins entry in webpack.config.js file:

   new ExtractTextPlugin({ "filename": "styles/[name].[contenthash:20].bundle.css", "disable": false }),

5. run npm run build since ng build no longer works on ejected apps. You should get dist directory with scripts and styles directories inside it along with their JS/CSS files, index.html should be located directly under dist and have correct includes like:

   <link href="styles/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> <script type="text/javascript" src="scripts/inline.3d27fc24e48981450c35.bundle.js"></script>

Update:

Since Angular 7 the eject command has been disabled so this solution will not longer work (see this related question).