Angular 7 - How to separate files in different directories

Question

I am configuring my Angular 7 application to production and trying to organise files in different directories.

angular.json

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/appname-ui",
                        "index": "src/index.html",
                        "main": "src/js/main.ts",
                        "polyfills": "src/js/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css",
                            "src/appname-theme.scss"
                        ],
                        "scripts": []
                    },

Currently my directory looks like this:

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   *.js (bundled files: runtime.js, polyfills.js, vendor.js, main.js)
|   |   |   *.map
|   |   |   style.css
|   |   |   *.woff, *.woff2, *.tff, *.eot

With the compilation, bundled javascript files are generated on the root directory along with font files that are copied to the root directory as well

I would like to:

1. Specify a different directory to bundled js files
2. Specify a different directory to font files. (if it has to be the same directory of the js files no problem, but nice to be different)

The structure would looks like this:

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   style.css

|   |   ├── libs
|   |   |   |   *.js
|   |   |   |   *.map

|   |   ├── fonts
|   |   |   *.woff, *.woff2, *.tff, *.eot

Is it possible to achieve this? If yes how?

Thank you very much for your help.

Best Regards

Answer 1

It is not supported officially but you can use ,

--baseHref=baseHref      Base url for the application being built.

--deployUrl=deployUrl    URL where files will be deployed.

--outputPath=outputPath  path for the new output directory

By combining them you can move the js/map/index.html files to specific location and update the baseHref and url in index.html.

More on,

https://github.com/angular/angular-cli/issues/10171