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?
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)Run npm install in order to install webpack loaders
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"
}
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
}),
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).
you can change the dist directory by changing the outDir in angular-cli.json but you can't set a separate directory for js files.
if you want to do that you'll have to write a small node script that runs after build and copies the files you want into dist/scripts. You'll also have to change the <script> tags inside index.html to point to the new location.