CODEWITHSUNDEEP
angularangular-cli
Andrei
Andrei

Reputation: 571

'ng build' move scripts to subfolder

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?

Upvotes: 9

Views: 7702

Answers (2)

Andriy
Andriy

Reputation: 15472

  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).

Upvotes: 5

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

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.

Upvotes: 0

Related Questions