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/samsara-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/samsara-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

3 Answers

3
Srinivasan Sekar On Best Solutions

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

0
Sunil Kashyap On

Based on the documentation here, you just need to update your angular.json file to change assets directory.

Something like:

"assets": [{ "glob": "sitemap.xml", "input": "src/assets/", "output": "/" }],

And to change bundle js path you need to specify new path at time of build i.e. ng build --prod --outputPath=NEW_PATH -- documentations - Link otherwise you just need to update js path in index.html

0
Shubham On

Yes it is.

All you need to do is to change entries in angular.json,

"assets":   [
              "src/assets/icons",
              "src/assets/images",
              "src/fonts"
            ],
"styles":   [
              "src/styles.css"
            ]

"scripts":  [
              "src/libs"
            ]