How to sort output chunks, font and other files in appropiate directories

[benpoe]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ *] feature request

Versions.

@angular/cli: 1.0.1
node: 7.7.2
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/platform-server: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

Repro steps.

npm run build:prod:aot

The log given by the failure.

none

Desired functionality.

When doing a "npm run build" all js-chunks, bundles, fonts are thrown into the "dist"-directory.
Using webpack I'd have sorted them into appropiate directories. js in "js", fonts in "fonts" etc.

              {
                  test: /\.woff(2)?(\?v=.+)?$/,
                  //    use: 'url-loader?limit=10000&mimetype=application/font-woff'
                  use: 'url-loader?limit=10000&mimetype=application/font-woff&name=**assets/fonts/**[name].[ext]'
              },

              {
                  test: /\.(ttf|eot|svg)(\?v=.+)?$/,
                  //use: 'file-loader'
                  loader: 'file-loader?name=**assets/fonts/**[name].[ext]'
              },

        output: {
            path: helpers.root('dist'),
            filename: '**js/**[name].[chunkhash].bundle.js',
            sourceMapFilename: '**js/**[name].[chunkhash].bundle.map',
            chunkFilename: '**js/**[id].[chunkhash].chunk.js'
        },

It'd be great if angular-cli would have an option to configure the output too.

[benpoe]

It'd be handy if .angular-cli.json has the option to sort filechunks.

For example the angular-cli.json could look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
"../node_modules/jquery-slimscroll/jquery.slimscroll.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/handsontable/dist/handsontable.full.js",
"../node_modules/chroma-js/chroma.js"
],
"outputSorter:"[{ extension: "ttf|eot|svg", outdir:"assets/fonts"},
{ extension: "js|js.map", outdir:"js"}, ]"

--
However, if it's not possible to have such an option, maybe you could add the changes in the hidden webpack-config itself?

[pronebel]

I need this feature also.
in production , the path need to support the domain path ,like "http://static.file.com/xxx.js"
thanks

[sumitarora]

@benpoe Anything you have in assets folder is copied as it is to assets folder keeping the directory structure.

[benpoe]

@sumitarora I'm not talking about static files. I'm talking about fonts and sass files referenced in node_modules and js compiled from the ts-files. These are all placed in the directory root.

[sukeshlaghate]

I need this feature too. It would be nice to be able to tell cli build to put inside dist folder

1. All built *.js files in js folder
2. All .scss/.CSS files is CSS folder
3. All font files in fonts folder
4. Index.html in sub folder for example ./dist/template this becomes useful when serving with Django which follows this kind of structure

[eixin]

Would it be nice to have webpack 'limit' option which was handy to bundle everything less than 10k into CSS in previous versions of CLI? If no, could please somebody be so kind to explain what was fundamentally wrong with it (I see the comment #12731 (comment) saying that it was by design to stop this bundling)?

[gaotter]

This would be a nice feature to able to have some control of how the paths and destinations where the different image files are copied. Or if it’s possible not move anything just change the relative domain paths to images etc in the generated css files. We are trying to upgrade our solution from Angular 6 to 7, but removal of inline svg is making a harder for us to move to Angular 7. The solution was original a asp.net mvc application with a lot of css,images etc. We are not using the generated html file but a asp.net view.

[edit]
I was not really able to override anything without it feeling very hacky. I tried to override the file loader but that did not work.

I kinda made it work by overriding the postcssPluginCreatore and changing the PostcssCliResources filename property with some custom path matching the rout in mvc. [path] flag took forever to build, but a static folder name worked.

Could it be a idea to create a setting in the angular.json file so that a user could add some path, that could be concatenated into the filename property used by the PostcssCliResources.

We ended up changing the dest to a folder that matched the controller with our Angular view.

[mgechev]

@gaotter you can currently have control over this feature if you customize your build with ngx-build-plus or alternative tools which let you plug into the webpack configuration.

Customizability of the output directory is outside the scope of the project but we will consider improving the output directory layout.

Thanks for pointing this out!

[Teamop]

PR #12967 introduces resourcesOutputPath option, which can at least resolve part of the issue.

[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.}