9

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?

Andrei
  • 571
  • 6
  • 15

2 Answers2

5

  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
}),`
  1. 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:

`

`

Update:

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

luiscla27
  • 4,956
  • 37
  • 49
Andriy
  • 14,781
  • 4
  • 46
  • 50
  • 1
    not only it is not working but it intuitively does not makes sens since these will be used as filenames templates too – Phil May 04 '18 at 07:22
  • it worked perfectly with current for time of answering version of Angular CLI (I should probably write this version in answer). If you need.help with current version, please specify this version and what exactly you need and I will try to help – Andriy May 04 '18 at 08:04
0

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.

Ahmed Musallam
  • 9,523
  • 4
  • 27
  • 47